<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>welcome</title>
<link rel= "stylesheet" href= "Http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css" >
<link rel= "stylesheet" href= "Http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css" >
<link rel= "stylesheet" href= "Http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css" >
<link rel= "stylesheet" href= "Http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.min.css" >
<link rel= "stylesheet" href= "Http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.default.min.css" >
<link rel= "stylesheet" href= "Http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css" >
<script src= "Http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script src= "Http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js" ></script>
<body style= "height:100%;" >
<div id= "Main" >
<div id= "Grid" data-bind= "Source:datasource" ></div>
</div>
</body
<script>
(function () {
var multiselecteditor = function (container, options) {
$ (' <input data-bind= ' value: ' + Options.field + ' "/> ')
. AppendTo (Container)
. Kendocombobox ({
Suggest:true,
DataSource:options.values
});
};
var numericeditor = function (container, options) {
$ (' <input data-bind= ' value: ' + Options.field + ' "/> ')
. AppendTo (Container)
. Kendonumerictextbox ({
Decimals:2,
min:0,
Format: ' C2 '
});
};
var multiselectarraytostring = function (item) {
Return Item.countries.join (', ');
};
var vm = kendo.observable ({
Countries: [' Canada ', ' Mexico ', ' states '],
Datasource:new Kendo.data.DataSource ({
Data: [{
Id:1,
Product: ' X002 ',
Countries: [' Mexico ', ' Canada '],
price:0.98
}, {
Id:2,
Product: ' X036 ',
Countries: [' states '],
price:2.96
}, {
Id:3,
Product: ' X098 ',
Countries: [],
price:45.90
}, ],
Schema: {
Model: {
ID: ' ID ',
Fields: {
' id ': {
Type: ' Number '
},
' Product ': {
Type: ' String '
},
' countries ': {},
' Price ': {
Type: ' Number '
}
}
}
}
}),
});
$ (' #grid '). Kendogrid ({
Columns: [{
Command: ' edit ',
Width: ' 120px ',
}, {
Field: ' Product '
}, {
Field: ' Countries ',
Editor:multiselecteditor,//function that generates the MultiSelect control
Values:vm.countries,//custom property with array of values
Template:multiselectarraytostring//Template:how to display text in grid
}, {
Field: ' Price ',
Editor:numericeditor,
Format: ' {0:c} '
}],
Editable: ' Inline ',
});
Kendo.bind (' #main ', VM);
})()
</script>
About grid cell styles for kendo