Radio buttons inside Kendo grid

javascript, jquery, kendo-grid, kendo-ui

Solution

You could try using MVVM in your editor template to bind the period field to the currently selected radio button.

$("#grid").kendoGrid({   dataSource: [{
    id: 1, name: "John", period: "F"   }, {
    id: 2, name: "Mary", period: "S"   }],   editable: true,   columns: [{
    field: "name",
    title: "First Name"   }, {
    field: "period",
    template: "<label>First<input disabled type='radio' value='#: period #' #= period== 'F' ? 'checked' : ''# >" +
              "<label>Second<input disabled type='radio' value='#: period #' #= period== 'S' ? 'checked' : ''# >"
    ,
    editor: "<label>First<input name='period' type='radio' data-bind='checked:period' value='F'>" +
    "<label>Second<input name='period' type='radio' data-bind='checked:period' value='S'>"
    ,
    title: "Period"   }] 
});

Here is a live demo: http://trykendoui.telerik.com/@korchev/ahaX

Problem

In my Kendo Grid I need three radio buttons binded to my data source and inCell editable. The problem is the editor. When I click in a column (and I created a div wall to force calling the editor), the value is not correctly set for the editor. When I click in another row and different column the value is not saved. And if I click in another row for same column, the name (radio group) is not correctly set (two editor lines of with same name). Is there a way to have the editor correctly behaving? I have the following grid defined using JavaScript: EDIT 1: I added some line-breaks in template and editor for increased readability but they shouldn't exist in code. EDIT 2: Fixed error in input tag validation. ``` <html> <!-- head code --> <body> <div id="grid"></div> <script> $(document).ready(function() { var grid = $("grid").kendoGrid({ dataSource: [{ id: 1, name: "John", period: "F" }, { id: 2, name: "Mary", period: "S" }], editable: true, columns: [{ field: "name", title: "First Name" }, { field: "period", title: "Period", template: '<div style="position:relative"> <input type="radio" name="group#: id#" value="F" #= period=="F" ? checked="checked" : "" # />First <input type="radio" name="group#: id#" value="S" #= period=="S" ? checked="checked" : "" # />Second <input type="radio" name="group#: id#" value="T" #= period=="T" ? checked="checked" : "" # />Third <div style="background-color: rgba(255, 0, 0, 0.5); position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div> </div>', editor: '<input type="radio" name="group#: id#Editor" value="F" #= period=="F" ? checked="checked" : "" # />First <input type="radio" name="group#: id#Editor" value="S" #= period=="S" ? checked="checked" : "" # />Second <input type="radio" name="group#: id#Editor" value="T" #= period=="S" ? checked="checked" : "" # />Third' }] }); } </script> </body> </html> ```

Original source