Checkbox column with Kendo grid

jestges picture jestges · Apr 24, 2013 · Viewed 34.5k times · Source

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

AlexFreitas picture AlexFreitas · Apr 29, 2013

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