CODEWITHSUNDEEP
c#-4.0razorkendo-gridkendo-asp.net-mvc
jestges
jestges

Reputation: 3740

Checkbox column with Kendo grid

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

Upvotes: 11

Views: 41269

Answers (4)

Sam
Sam

Reputation: 1

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.

Upvotes: -1

Mahib
Mahib

Reputation: 4063

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.

Upvotes: 5

ravisolanki07
ravisolanki07

Reputation: 647

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

Upvotes: 5

AlexFreitas
AlexFreitas

Reputation: 342

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

Upvotes: 24

Related Questions