Checkbox column with Kendo grid - c#-4.0

Question

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"))
)
)

Answer 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);
})
})

Answer 2

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

Answer 3

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.

Answer 4

you can add checkbox in each row with header using this,
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Select();
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsInStock);
columns.Bound(p => p.Discontinued);
})
.Pageable()
.Sortable()
.Events(ev=>ev.Change("onChange"))
.PersistSelection()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.ProductID))
.Read(read => read.Action("Selection_Read", "Grid"))
))
Here we use PersistSelection() for persistting selected items across all pages.
If column.Select() gives error or not bind the grid then upgrade your kendo UI version. It will work.