Selecting radio buttons with Kendo UI Grid

Question

I am working on a Kendo UI grid. I have a grid which contains data from an external source. Also I have a radio button assigned to each row as a template.

How can I make the radio button select when I click a row? Currently, I have to click on the radio button to make it selected.

CSharper CSharper · Accepted Answer · 2014-11-03T18:28:48

I'm using a checkbox instead, and here is how I am defining it.

columns.Bound(x => x.IsChecked).ClientTemplate(
   "<input name='IsChecked' class='chkBox' type='checkbox'
     data-bind='checked: IsChecked' #= IsChecked ? checked='checked' : '' #/>");

And then on click function of the grid

    $('#Grid').click(function () {

        var gview = $("#Grid").data("kendoGrid");
        var selectedItem = gview.dataItem(gview.select());                     
        var bool = selectedItem.IsChecked;
        selectedItem.set("IsChecked", (bool) ? 0 : 1);    
        console.log(selectedItem); 

        //This is what you need to do to keep the row selected.
        gview.tbody.find("tr[data-uid='" + selectedItem.uid + "']")
        .addClass("k-state-selected");      

    })

If you view the selectedItem in the console, you will see that kendo adds a uid property. So we are findind that uid and adding the k-state-selected class.

Selecting radio buttons with Kendo UI Grid

1 Answers