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
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

how to update checkbox column on single click?

Platform: jQuery |
Control: ejGrid

This KB showcase the example to update the checkbox column value on single click.


To display the checkbox column in grid, use template property of Grid column and then to update the checkbox column value on single click use updateRecord method in the change event of checkbox.

Step 1. Render the grid with template column


<div id="FlatGrid"></div>
<script type="text/javascript">
$(function () {
                // the datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
                dataSource: window.gridData,
                allowPaging: true,
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
                columns: [
                    { field: "Verified", headerText: "check", template: "#template", textAlign: "center", width: 110 },
                    { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75 },
                    { field: "CustomerID", headerText: "Customer ID", width: 80 }



              .AllowPaging()    /*Paging Enabled*/
              .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
                              .ToolbarSettings(toolbar =>
                                  toolbar.ShowToolbar().ToolbarItems(items =>
               .Columns(col =>
                            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();                                                                     
                            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();


    public class GridController : Controller
        public ActionResult GridFeatures()
            var DataSource = new NorthwindDataContext().OrdersViews.ToList();
            ViewBag.DataSource = DataSource;
            return View();       



<ej:Grid ID="FlatGrid" runat="server"  AllowPaging="True" >
                <ej:Column Field="Verified" HeaderText="check" Template="#template"   Width="80" />
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True"  Width="90" />
                <ej:Column Field="CustomerID" HeaderText="Customer ID"   Width="80" />
            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" ></EditSettings>
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>


protected void Page_Load(object sender, EventArgs e)
            this.FlatGrid.DataSource = new NorthwindDataContext().Orders;


.Net core

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource"  >
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" ></e-edit-settings>
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' />
        <e-column field="Verified" header-text="check" template="#template" width="80"></e-column>      
        <e-column field="OrderID" is-primary-key="true" header-text="Order ID" width="90"></e-column>
        <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column>


public ActionResult GridFeatures()
                var DataSource = new NorthwindDataContext().OrdersViews.ToList();
                ViewBag.DataSource = DataSource;
                return View();



<ej-grid id="Grid" #grid [dataSource]="gridData" allowPaging="true" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" >
                <e-column headerText='check' field="Verified" width='80' textAlign='center'> 
                        <ng-template e-template let-data>
                                        <input type="checkbox" id="Verified" name="Verified" (change)="myFunction($event)" checked="checked" class="e-field e-checkbox" style="width:30px" /> 
            <e-column field="OrderID" [isPrimaryKey]="true" width='80' headerText="OrderID"></e-column>
            <e-column field="CustomerID" headerText="CustomerID" width='80' ></e-column>


TS File
export class GridComponent {
    public gridData;
    public editSettings;
    public toolbarItems;
    @ViewChild('grid') Grid: EJComponents<any, any>;
                // the datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'   
           this.gridData = (window as any). gridData;
           this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode:"dialog" };
            this.toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };
        var obj = $("#Grid").ejGrid("instance") 
        obj.updateRecord("OrderID", { OrderID: this.gridData[obj.model.selectedRowIndex].OrderID,
 Verified: !this.gridData[obj.model.selectedRowIndex].Verified }); 


Step 2: Bind change event in checkbox template

<script id="template" type="text/template">
    {{if Verified}}
    <input type="checkbox" id="Verified" name="Verified" onchange="myFunction(event)" checked="checked" class="e-field e-checkbox" style="width:30px" />
    <input type="checkbox" id="Verified" name="Verified" onchange="myFunction(event)" class="e-field e-checkbox" style="width:30px" />


Step 3: In checkbox change event, call update record method

<script type="text/javascript">
function myFunction(event) {
      var obj = $("#FlatGrid").ejGrid("instance")
      obj.updateRecord("OrderID", { OrderID:obj.model.dataSource[obj.model.selectedRowIndex].OrderID, Verified: !obj.model.dataSource[obj.model.selectedRowIndex].Verified });


Figure: Grid with editable checkbox


You must log in to leave a comment
Giancarlo Cherubin
Mar 31, 2019

Sorry, a quick note: in the Step 3 you wrote

Giancarlo Cherubin
Mar 31, 2019

I apologize, the right comment is

Sorry, a quick note: in the Step 3 you wrote script/ instead of /script

Manivannan Padmanaban [Syncfusion]
Apr 01, 2019

Hi Gian,

Thanks for your feedback.

We have modified the Knowledge base document and the same is refreshed in the online.

Regards, Manivannan Padmanaban.

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile