Radio buttons inside Kendo grid

Question

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>

Atanas Korchev Atanas Korchev · Accepted Answer · 2014-04-22T14:31:01

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

Radio buttons inside Kendo grid

1 Answers