Restrict multiple checks in kendo grid

问题:

I have a kendo grid, with checkboxes as a column. I want to restrict multiple checks on this. i.e. User must be able to check only one row, not more than 1.

Please help me on this.

Edit:

The checkboxes are generated using clientTemplate. I have bounded the column with the grid.

     columns.Bound(p => p.FlightNo).HeaderTemplate(" ")
    .ClientTemplate("<input id='checkbox' name='chbox' class='chkbxq' type='checkbox' />").Sortable(false).Filterable(false).Width(50);

Thanks Manikandan

回答1:

Checkboxes don't use to be mutually exclusive, so you need some JavaScript code for getting what you look for.

Lets say that your grid identification is grid. You would need the following code for removing any other checked box.

$("#grid").on("change", "input.chkbxq", function (e) {
    var v = $(this).is(":checked");
    $("input.chkbxq", "#grid").prop("checked", false);
    $(this).prop("checked", v);
});

What I do is:

1. Define a handler for any HTML input that has the class chkbxq.
2. Get the status of the checked input.
3. Set to false any input checkbox with class chkbxq
4. Finally set the status of the checked input to the value. This is needed since we have removed it in the previous step.

Problem: Checkbox state is not persisted when you play with pagination as you can see in a running example of this technique here : http://jsfiddle.net/OnaBai/eDu3k/2/