jquery - Kendo UI grid: radio button and pagination issue -

i have implemented simple kendo ui grid filtering , pagination. have first column radio button each row, , should able select 1 radio button @ time. however, when change page, current selection gets cleared , when come page, find no radio button selected!

this html table:

<table id="grid">             <colgroup>                 <col />                 <col />                 <col />                 <col style="width:110px" />                 <col style="width:120px" />                 <col style="width:130px" />             </colgroup>             <thead>                 <tr>                     <th data-field="select">select</th>                     <th data-field="make">car make</th>                     <th data-field="model">car model</th>                     <th data-field="year">year</th>                     <th data-field="category">category</th>                     <th data-field="airconditioner">air conditioner</th>                 </tr>             </thead>             <tbody>                 <tr>                     <td><input type="radio" name="rg" /></td>                     <td>volvo</td>                     <td>s60</td>                     <td>2010</td>                     <td>saloon</td>                     <td>yes</td>                 </tr>                 <tr>                 <!-- contains many similar rows radio button -->                 </tr>             </tbody>          </table> 

this kendo grid configuration:

$("#grid").kendogrid({   sortable: true,   pageable: {     pagesize: 10   },   filterable: {     mode: "row",     extra: false   } }); 

could please tell me way how make possible? in advance!

i think it's because radio button or maybe whole row re-initialized , selected value doesn't got stored anywhere grid, if using use checkbox can bind value field on datasource model. radio button propose workaround problem is:

1. create view model using kendo observable object, , have store current selected radio button
2. on every page change databound triggered re-bind grid view model

demo

explanation :

first of create dummy data , view model there

var data = [       {id:1,make:"volvo",model:"s60",year:"2010",category:"saloon",airconditioner:"yes"},       {id:2,make:"audi",model:"s60",year:"2010",category:"saloon",airconditioner:"yes"},       {id:3,make:"bmw",model:"s60",year:"2010",category:"saloon",airconditioner:"yes"},       {id:4,make:"ferari",model:"s60",year:"2010",category:"saloon",airconditioner:"yes"},       {id:5,make:"honda",model:"s60",year:"2010",category:"saloon",airconditioner:"yes"},       {id:6,make:"lamborghini",model:"s60",year:"2010",category:"saloon",airconditioner:"yes"},       {id:7,make:"toyota",model:"s60",year:"2010",category:"saloon",airconditioner:"yes"},       {id:8,make:"mazda",model:"s60",year:"2010",category:"saloon",airconditioner:"yes"},       {id:9,make:"viper",model:"s60",year:"2010",category:"saloon",airconditioner:"yes"}     ];  var vm = new kendo.data.observableobject({     selectedrow: null,     select: function(){ console.log(vm.selectedrow); },     datasource : new kendo.data.datasource({         data: data,         pagesize: 3     }), }); 

second, initialize grid (with custom column template radio button) , can see have data-bind='checked:selectedrow' , value='#:id#' store row's radio button being checked

$("#grid").kendogrid({     columns: [       { title: "id", width: "50px", template: "<input type='radio' name='rg' value='#:id#'  data-bind='click:select, checked: selectedrow' />" },       { field: "make", title: "car make", width: "130px" },       { field: "model", title: "car model", width: "130px" },       { field: "year", title: "year", width: "130px" },       { field: "category", title: "category", width: "130px" },       { field: "category", title: "category", width: "130px" },     ],     databound: function(e){        kendo.bind($("#grid"),vm);     },     datasource: vm.datasource,     sortable: true,     pageable: {       pagesize: 3     },     filterable: {       mode: "row",       extra: false     } });  kendo.bind($("#example"),vm); 

but trick every databound re-bind grid viewmodel vm because every time go next/prev page got re-initialized newly created radio button automatically selected databound: function(e){ kendo.bind($("#grid"),vm); }