Kendo UI Web Grid, Virtual Scrolling and dynamic checkbox

Question

I am using the kendo UI Web Grid to display some data. Since I am dealing with a lot of data I have decided to use the grid virtual scrolling feature, which works great.

Now, I need to add a non databound column that will get populated with a checkbox, so that I can check/uncheck a record in the grid for further processing.

I cam able to add the checkbox column by simply using a template :

columns: [
            {
                field: "",
                width:'3%',
                title: " ",
                hidden: false,
                template: "<input type=\"checkbox\" />"
            },

The problem that I am running into is that when virtual scrolling is enabled, if I check one of the checkboxes, then scroll the grid, when I go back to the record that was checked, it is not checked anymore.

How can I use virtual scrolling and still keep my checkbox checked ?

Thanks

Petur Subev Petur Subev · Accepted Answer · 2013-05-07T20:02:32

The rows are always re-created when you pass as many records as your pageSize is. However if you really bind that checkbox to the underlying model, the changes will be persisted and once you are back on the same page you will see the items as checked.

One way to make the checkboxes reflect the changes to the model is like this:

grid.tbody.on('click',':checkbox',function(e){
  var row = $(this).closest('tr');
  grid.dataItem(row).set('isAdmin',$(this).is(':checked'));

})

Where isAdmin is the name of the field the checkbox is bound to.

Here is live example.

Kendo UI Web Grid, Virtual Scrolling and dynamic checkbox

1 Answers