KendoUI Check Boxes in a Grid: how to and some tips and tricks


In my previous posts about checkboxes in KendoUI (here and here) I covered how to define regular checkboxes but there is one case missing: a checkbox as a cell of a grid.

KendoUI checkbox in a grid

For this explanation I’m going to use the following data:

var entries = [
    { selected:true, symbol:"AAPL" },
    { selected:false, symbol:"AMZN" },
    { selected:false, symbol:"GOOG" }
];

Where selected is a boolean that is going to be used for controlling the status of the checkbox.

My grid is created as follow:

$("#stocks_tbl").kendoGrid({
    dataSource:{
        data:entries
    },
    columns : [
        { field: "selected", title: "Selected" },
        { field: "symbol"  , title: "Tick" }
    ]
}).data("kendoGrid");

And I get this:
Doing this, I display selected as a string (true or false). But I want to display it as a checkbox.

KendoUI checkbox in a grid

There is not role or similar that allow me to control how to display the boolean so I have to use KendoUI templates for choosing the type of rendering.

My first attempt was using data-bind as I did for checkboxes not in a grid but this does not work. So I use “#= code #” for placing code that is executed while rendering each row of the grid. This code checks the value of selected and if true adds ‘checked’ attribute to the input, otherwise does nothing.

template: "<input type="checkbox" name="selected" checked="checked" />"

And this is what I get:

Seems almost correct, there is just one minor question because the checkbox can be marked even when the row is not editable. This can easily be solved just adding the attribute disabled to the input definition.

Nevertheless, there is one second problem much worse since when I check the checkbox the data structure bound to the grid is not updated. This can be seen in the capture where I clicked on AMZN but the content still says it is false.

To solve this I have had to add the disabled attribute and add a command column with an Edit button. This allows me to change the value of selected and get the datasource updated.

This is the new code:

grid = $("#stocks_tbl").kendoGrid({
    dataSource:{
        data:entries
    },
    editable  :"inline",
    columns   :[
        { command:[ "edit" ], width:200 },
        {
            field     :"selected",
            title     :"Selected",
            template  :"<input type="checkbox" name="selected" checked="checked" disabled="disabled" />",
            attributes:{ class:"ob-fld-boolean" }
        },
        { field:"symbol", title: "Tick" }
    ]
}).data("kendoGrid");

and this is the capture:

Now, when I click on select for AMZN the data in the datasource (displayed bellow the grid) immediately contains the value true

Next step: avoid having to define a column for edit button and replace it with a simple double-click. Read here how

Advertisements

2 thoughts on “KendoUI Check Boxes in a Grid: how to and some tips and tricks

  1. Does this work with batch editing (editable: true, rather than editable: inline)? I’m having trouble with it. When checking the checkbox, grid edit/save isn’t triggered.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s