I have a custom dropdown editor in a inline editing grid. Note in the attached screen shot that the first item in the dropdown is always selected as well as the actual selection.
var expGrid = $("#Expenses").createKendoGrid({
stateKey: "PartEditExpenses",
toolbar: kendo.template($("#expenses-toolbar-template").html()),
columns: [
{ field: "TypeName", title: "Type", width: 200, footerTemplate: "Total", editor: function(container) {
$('<input required data-bind="source: expensetypes, value: TypeID"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Text",
dataValueField: "Value",
valuePrimitive: true,
select: function(e) {
expGrid.dataItem(expGrid.current().closest("tr")).TypeName = e.item.text();
}
});
} },
{ field: "Amount", width: 100, format: "{0:n2}",
footerTemplate: "<span id='totalExpenses'>#= abs.parts.edit.totalExpenses() #</span>" },
{ field: "Source", width: 200 },
{ field: "Description", width: 300 },
{ field: "Averaged", title: "Avg", width: 50 },
{ command: [{
name: "del",
text: "Delete",
click: function (e) {
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
if (confirm("Deleted this Expense!")) {
data.set("IsDeleted", true);
me.updateTotalExpenses();
}
}
}]
}
],
....
var expGrid = $("#Expenses").createKendoGrid({
stateKey: "PartEditExpenses",
toolbar: kendo.template($("#expenses-toolbar-template").html()),
columns: [
{ field: "TypeName", title: "Type", width: 200, footerTemplate: "Total", editor: function(container) {
$('<input required data-bind="source: expensetypes, value: TypeID"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Text",
dataValueField: "Value",
valuePrimitive: true,
select: function(e) {
expGrid.dataItem(expGrid.current().closest("tr")).TypeName = e.item.text();
}
});
} },
{ field: "Amount", width: 100, format: "{0:n2}",
footerTemplate: "<span id='totalExpenses'>#= abs.parts.edit.totalExpenses() #</span>" },
{ field: "Source", width: 200 },
{ field: "Description", width: 300 },
{ field: "Averaged", title: "Avg", width: 50 },
{ command: [{
name: "del",
text: "Delete",
click: function (e) {
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
if (confirm("Deleted this Expense!")) {
data.set("IsDeleted", true);
me.updateTotalExpenses();
}
}
}]
}
],
....