How to handle the onchange(checked, unchecked event ) of checkbox column in Grid

[Venkatesh]

Dear Team,

Request you to let me know how we can handle onchange event of checkbox type column in Grid of Syncfusion ASP.NET Web Forms.

Below is the sample code, Let me know the event which should be called when the checkbox is checked or unchecked.

<ej:Grid ID="GridMatterDisplay" runat='server' AllowSorting="true" AllowMultiSorting="true" AllowPaging="false" AllowFiltering="true" AllowTextWrap="true" AllowResizing="true" AllowResizeToFit="true" AllowScrolling="true" GridLines="Horizontal" EnableAltRow="false" IsResponsive="true">

                    <TextWrapSettings WrapMode="Both" />

                    <FilterSettings FilterType="Menu" FilterBarMode="Immediate"></FilterSettings>

                    <ScrollSettings Width="1200" />

                    <SelectionSettings SelectionMode="Cell" />

                    <Columns>

                        <ej:Column Type="checkbox" HeaderText="" Width="3%" AllowSorting="false" TextAlign="Left" AllowFiltering="false"></ej:Column>

Thanks & Regards,

Venkatesh Yellaboyina

[Farveen Sulthana Thameeztheen Basha]

Hi Venkatesh, 

Thanks for contacting Syncfusion Support. 

Query#:- Let me know the event which should be called when the checkbox is checked or unchecked. 

 

We have checked your query and while on Checkbox selection with checkbox check/uncheck actions RowSelected  and RowDeselected event will trigger.   Refer to the below code:- 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" Selectiontype="Multiple"> 

       <ClientSideEvents RowSelected="rowSelected"  RowDeselected="rowDeselected" /> 

            <Columns> 

                <ej:Column Type="checkbox" Width="50" /> 

                <ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" Width="90" /> 

                  

            </Columns> 

        </ej:Grid> 

       <script> 

           function rowSelected(args) { 

                 // do your stuff here 

           } 

           function rowDeselected(args) { 

               // do your stuff here 

           } 

       </script> 

Refer to the API Links:- 

https://help.syncfusion.com/api/js/ejgrid#events:rowselected 

https://help.syncfusion.com/api/js/ejgrid#events:rowdeselected 

For additional information we have placed the checkbox as Template and performed Selection with change event of ejCheckBox. Refer to the below KB link:- 

https://www.syncfusion.com/kb/3180/how-to-perform-multiple-row-selection-using-checkbox-in-a-grid 

You can use anyone of the above solutions to achieve your requirement. Please get back to us if you are facing any difficulties on this. 

Regards, 

Farveen sulthana T