or
<!DOCTYPE html><html> <head> <link href="../styles/kendo.metro.min.css" rel="stylesheet"> <link href="../styles/kendo.common.min.css" rel="stylesheet"> <script src="../js/jquery.min.js"></script> <script src="../js/kendo.all.min.js"></script> </head> <body> <div id="grid" style="width:1024px; height:400px; margin-left:auto; margin-right:auto;"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { transport: { read: "load.php", update: { url: "load.php", type: "POST" }/*, destroy: { url: "load.php", type: "DELETE" }*/ }, error: function(e) { alert(e.responseText); } }, columns: [ { field: "termekid", width:"70px" }, /* ... */ { field: "szin", width:"74px", editor: szinColorPickerEditor } /* ... */ ], sortable: true, editable: true, navigatable: true, toolbar: ["save", "cancel"/*, "create"*/], pageable: { previousNext: true, numeric: true, buttonCount: 5, input: false, pageSizes: [0, 10, 20, 50, 100], refresh: true, info: true } }); function szinColorPickerEditor(container, options) { $("<input type='color' data-bind='value:" + options.field + "' />") .appendTo(container) .kendoColorPicker({ buttons: true }); } }); </script> </body> </html>

[{ "AssetClassCode": "XYZ", "AssetClassName": "Domestic Bonds", "Benchmarks": [{"ExtensionData":{},"AssetClassCode":"XYZ", "InvestmentCode": "ABC", "YTD": 0.14, "Year1": 0.23, "Year3": 0.21, "Year5": 0.23}]}]viewModel = kendo.observable({ assetClassesDataSource: dataSource, save: function () { console.log("saving"); }, edit: function () { console.log("edit"); }, onBenchmarkChange: function (args) { args.data.set("InvestmentCode ", args.sender.dataItem().InvestmentCode ); args.data.set("Allocation", 0); args.data.set("Ytd", args.sender.dataItem().Ytd); args.data.set("Year1", args.sender.dataItem().Year1); args.data.set("Year3", args.sender.dataItem().Year3); args.data.set("Year5", args.sender.dataItem().Year5); console.log("done setting"); }...<div data-role="grid" data-editable="true" data-bind="source: assetClassesDataSource, events: { save: save, edit: edit, dataBound: dataBound }" data-columns="[ {'field': 'AssetClassName', 'width': '25%', 'title': 'Asset Class'}, {'field': 'InvestmentCode', 'width': 190, 'title': 'Investment Code'}, {'field': 'InvestmentName', 'width': '25%', 'title': 'Investment'}, {'field': 'Allocation', 'width': 75, headerAttributes: { 'class': 'text-right'}, groupFooterTemplate: '#: sum #%', footerTemplate: '# if(data.Allocation) { if (sum > 100) {# <span class=\'message-error\'>#= sum #%</span> #} else {# <span class=\'\'>#= sum #%</span> #} } else {# 0 #}#'}, {'field': 'Ytd', 'width': 75, 'title': 'YTD', headerAttributes: { 'class': 'text-right'}}, {'field': 'Year1', 'width': 75, 'title': '1 Year', headerAttributes: { 'class': 'text-right'}}, {'field': 'Year3', 'width': 75, 'title': '3 Year', headerAttributes: { 'class': 'text-right'}}, {'field': 'Year5', 'width': 75, 'title': '5 Year', headerAttributes: { 'class': 'text-right'}}]" data-row-template="row-template"> </div><script id="row-template" type="text/x-kendo-template"> <tr> <td></td> <td data-bind="text: AssetClassName"> </td> <td data-bind="text: BenchmarkCode"> </td> <td> <input data-role="dropdownlist" data-text-field="InvestmentName" data-value-field="InvestmentCode" data-bind="{source: Benchmarks, events: {change: onBenchmarkChange, dataBound: onBenchmarksDataBound}}" data-value-primitive="true" /> </td> <td class="text-right"> <input class="editable" data-role="numerictextbox" data-format="N0" data-bind="{value: Allocation}" data-min="0" data-max="100" /> </td> <td class="text-right"> #: kendo.toString(get("Ytd"), "P") # </td> <td class="text-right"> #: kendo.toString(get("Year1"), "P") # </td> <td class="text-right"> #: kendo.toString(get("Year3"), "P") # </td> <td class="text-right"> #: kendo.toString(get("Year5"), "P") # </td> </tr> </script>