We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. EjGrid checkbox column events

EjGrid checkbox column events

Hi, how can i add a change event for a checkbox column i have on a grid?
I could use events in command cols but i'm not sure how to do it for a column with a control (a checkbox in this case).

Thanks!

5 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 7, 2016 08:32 AM UTC

Hi Ignacio, 

Using template property of the Grid columns, you can render the checkbox in the Grid columns and templateRefresh events will be used to bind controls/events to the template elements. Refer to the following code example and Help Documents. 

    <script type="text/x-jsrender" id="columnTemplate"> 
        <input type="checkbox"> 
    </script> 
    <div id="Grid"></div> 
    <script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                // the datasource "window.gridData" is referred from jsondata.min.js 
                dataSource: window.gridData, 
                allowPaging: true, 
                columns: [ 
                                  { headerText: "checklist", template: "#columnTemplate" }, 
                     . . .  
                      . . 
                ], 
                templateRefresh: function (args) { 
                    $(args.cell).find("input").ejCheckBox({ 
                        change: function (args) { 
                            console.log("changed"); 
                        } 
                    }) 
                } 
            }); 
        }); 
    </script> 
  
Note: We have rendered CheckBox control with their change event. Likewise, you can bind events for generic checkbox. 


We have prepared a sample that can be referred from the following jsPlayground. 


Regards, 
Seeni Sakthi Kumar S. 


IG Ignacio October 7, 2016 08:35 PM UTC

Ok, thanks!

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 10, 2016 04:10 AM UTC

Hi Ignacio, 

Thanks for the update. Please get back to us if you need further assistance on this. 

Regards, 
Seeni Sakthi Kumar S. 


GU Guadalupe replied to Seeni Sakthi Kumar Seeni Raj March 26, 2019 08:53 PM UTC

Hi Ignacio, 

Thanks for the update. Please get back to us if you need further assistance on this. 

Regards, 
Seeni Sakthi Kumar S. 


Hello 

This is possible with asp.net?

I need the example please.


Cordially, Guadalupe Baigorria

VN Vignesh Natarajan Syncfusion Team March 27, 2019 07:03 AM UTC

Hi Guadalupe, 
 
Thanks for the update. 
 
Query: This is possible with asp.net? 
 
Yes. it is possible. We have prepared a sample in ASP.NET to trigger a event when checkbox inside the Grid is changed. We have achieved that requirement using TemplateRefresh event of ejGrid. Please refer the below code example, 
 
  <script type="text/x-jsrender" id="columnTemplate"> 
        <input type="checkbox"> 
    </script> 
 
    <ej:Grid ID="EmployeesGrid" runat="server" AllowPaging="True"> 
        <PageSettings PageSize="4"></PageSettings> 
        <ClientSideEvents TemplateRefresh="refresh" /> 
        <Columns> 
            <ej:Column HeaderText="checkbox" Template="#columnTemplate" TextAlign="Center" Width="110" /> 
………………………. 
        </Columns> 
    </ej:Grid> 
 
    <script> 
        function refresh(args) { 
 
            $(args.cell).find("input").ejCheckBox({ 
                change: function (args) { 
                    console.log("changed"); 
                } 
            }) 
        } 
 
 
    </script> 
 
Kindly download the sample from below link. 
 
 
Refer our API documentation for your reference 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan. 
 


Loader.
Up arrow icon