Category / Section
how to update checkbox column on single click?
2 mins read
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
