Create a gist now

Instantly share code, notes, and snippets.

Kendo Combo Editor
// with <div id="grid"></div>
var sourceData = [
{ Position: 'One', Simple: 'foo', Complex: { Login: 'foo', Description: 'foo - Foo Frye' } },
{ Position: 'Two', Simple: 'bar', Complex: { Login: 'bar', Description: 'bar - Bar River' } },
{ Position: 'Three', Simple: 'bar', Complex: { Login: 'bar', Description: 'bar - Bar River' } },
{ Position: 'Four', Simple: 'baz', Complex: { Login: 'baz', Description: 'baz - Jayne Baz' } },
];
var nameList = [
{ Login: 'foo', Description: 'foo - Foo Frye' },
{ Login: 'bar', Description: 'bar - Bar River' },
{ Login: 'baz', Description: 'baz - Jayne Baz' },
{ Login: 'zoom', Description: 'zoom - Zoe Zoom' },
];
var mySimpleEditor = function(container, options) {
var ed = $('<select ' +
' data-bind=" source: listSource.list, value: ' + options.field + '" ' +
' data-text-field="Description" ' +
' data-value-field="Login" ' +
' />')
options.model.listSource = kendo.observable({list: nameList})
ed.appendTo(container);
}
var myComplexEditor = function(container, options) {
var ed = $('<select ' +
' data-text-field="Description" ' +
' data-bind=" source: listSource.list, value: ' + options.field + '" />')
options.model.listSource = kendo.observable({list: nameList})
ed.appendTo(container)
}
$('#grid').kendoGrid({
dataSource: {
data: sourceData,
schema: {
model: {
fields: {
Position: { type: 'string' },
Simple: { type: 'string' },
Complex: { type: 'object' },
},
}
}
},
editable: true,
columns: [
{ field: 'Position' },
{
field: 'Simple',
editor: mySimpleEditor,
},
{
field: 'Complex',
template: '#=Complex.Description#',
editor: myComplexEditor,
},
]
});
$('#showData').on('click', function() {
var data = $('#grid').data('kendoGrid').dataSource.data();
console.log(data);
$('#dataDetails').text(JSON.stringify(data));
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment