JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<div id="gridDiv"></div>
JavaScript
var xml = '<ROWS><ROW><CARD>1</CARD><LLINE>1</LLINE><RECTYPE>A</RECTYPE></ROW><ROW><CARD>1</CARD></ROW></ROWS>';
$(document).ready(function() {
$('#gridDiv').kendoGrid({
sortable: true,
selectable: 'row',
filterable: true,
resizable: true,
reorderable: true,
editable: true,
save: function(e){
if(e.values.RECTYPE){
var dropDown = e.container.find("[data-role=dropdownlist]").data("kendoDropDownList");
var value = dropDown.value();
var model = e.model;
setTimeout(function(){
model.set("RECTYPE",value);
});
}
},
columns: [
{
field: 'CARD',
title: 'Card',
width: 60
},{
field: 'LLINE',
title: 'Line',
width: 60
},{
field: 'RECTYPE',
title: 'Type',
width: 100,
values: [{ 'value': '', 'text': ' ' }, { 'value': 'A', 'text': 'Type A' }, { 'value': 'B', 'text': 'Type B' }]
}
],
dataSource: new kendo.data.DataSource({
type: 'xml',
data: xml,
schema: {
type: 'xml',
data: '/ROWS/ROW',
model: {
fields: {
id: '@id',
CARD: 'CARD/text()',
LLINE: 'LLINE/text()',
RECTYPE: 'RECTYPE/text()'
}
}
}
})
});
});