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 |
Published Date: August 27, 2018 |
Last Revised Date: April 1, 2019

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

Solution:

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

JS

 
<div id="FlatGrid"></div>
<script type="text/javascript">
$(function () {
            $("#FlatGrid").ejGrid({
                // 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 }
                ]
            });
        });
 
</script> 

 

MVC

 
     @(Html.EJ().Grid<object>("FlatGrid")
              .Datasource((IEnumerable<object>)ViewBag.DataSource)
              .AllowPaging()    /*Paging Enabled*/
              .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
                              .ToolbarSettings(toolbar =>
                              {
                                  toolbar.ShowToolbar().ToolbarItems(items =>
                                  {
                                      items.AddTool(ToolBarItems.Add);
                                      items.AddTool(ToolBarItems.Edit);
                                      items.AddTool(ToolBarItems.Delete);
                                      items.AddTool(ToolBarItems.Update);
                                      items.AddTool(ToolBarItems.Cancel);
                    });
               })
               .Columns(col =>
               
                        {
                                                            col.Field("Verified").Template("#template").HeaderText("check").Width(110).Add();
                            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();                                                                     
                            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
                        }))
 

 

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

 

ASP

 
<ej:Grid ID="FlatGrid" runat="server"  AllowPaging="True" >
          
  <Columns>
                <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" />
                
            </Columns>
            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" ></EditSettings>
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
 
        </ej:Grid>
 

 

 
[CS]
 
protected void Page_Load(object sender, EventArgs e)
        {
            this.FlatGrid.DataSource = new NorthwindDataContext().Orders;
            this.FlatGrid.DataBind();
        }
 

 

.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-columns>
        <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>
    </e-columns>
</ej-grid> 

 

[CS]
 
public ActionResult GridFeatures()
        {
                var DataSource = new NorthwindDataContext().OrdersViews.ToList();
                ViewBag.DataSource = DataSource;
                return View();
        }        
            

 

Angular

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

 

TS File
 
export class GridComponent {
    public gridData;
    public editSettings;
    public toolbarItems;
    @ViewChild('grid') Grid: EJComponents<any, any>;
    constructor(){ 
                // 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"] };
       myFunction(e:any){
        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" />
    {{else}}
    <input type="checkbox" id="Verified" name="Verified" onchange="myFunction(event)" class="e-field e-checkbox" style="width:30px" />
    {{/if}}
</script>

 

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 });
        }
</script>
 

 

Figure: Grid with editable checkbox

 

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

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

Reply
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