Checkbox column with Kendo grid
36,502
Solution 1
This is how I did it:
columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsAdmin ? checked='checked':'' # class='chkbx' />")
and then on javascript:
$(function () {
$('#grid').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#grid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('IsAdmin', checked);
})
})
Solution 2
I normally add a boolean column in the model; like following.
@(Html.Kendo().Grid(Model)
.Name("items")
.Columns(columns =>
{
columns.Bound(p => p.status).ClientTemplate("<input type='checkbox' disabled #= status == true ? checked='checked' : '' # />");
columns.Bound(p => p.itemname).Title("Name");
columns.Bound(p => p.cost).Title("Cost");
columns.Bound(p => p.stockinhand).Title("Stock in hand");
columns.Command(command => command.Destroy()).Width(100);
})
.Pageable()
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(p=>p.Id))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
And to disable it until you press "Edit" button just add "disabled" in the ClientTemplate. That should do it. Thanks.
Solution 3
Hi you can add Checkbox in Header and Column like below :
columns.Bound(p => p.Status).HeaderTemplate("<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);' />").ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkbxq' type='checkbox' />").Sortable(false).Filterable(false).Width(30);
And FInd Checkbox click like below :
//Cell click Checkbox select
$('#Grid').on("click", "td", function (e) {
var selectedTd = $(e.target).closest("td");
var grdChkBox = selectedTd.parents('tr').find("td:first").next("td").find('input:checkbox');
grdChkBox.prop('checked', !grdChkBox.prop('checked'));
});
And do Check all checkbox functionality like below :
function ToggleChkBox(flag) {
$('.chkbxq').each(function () {
$(this).attr('checked', flag);
});
}
Author by
jestges
Updated on July 09, 2022Comments
-
jestges almost 2 years
I wanted to add a checkbox column as first column to below grid. Can some one help me how to add it?
@(Html.Kendo().Grid(Model) .Name("items") .Columns(columns => { columns.Bound(p => p.itemname).Title("Name"); columns.Bound(p => p.cost).Title("Cost"); columns.Bound(p => p.stockinhand).Title("Stock in hand"); columns.Command(command => command.Destroy()).Width(100); }) .Pageable() .DataSource(dataSource => dataSource .Server() .Model(model => model.Id(p=>p.Id)) .Destroy(update => update.Action("EditingInline_Destroy", "Grid")) ) )