I have a kendo combobox inside a kendo grid. I use MVVM binding to bind the combobox to the items in the list. The problem is, when i select an item from the combobox dropdown everything is fine, but when i manually type something into the combobox the value does not save... Here is my grid and combobox code:
grid:
$("#specificJoinGrid-" + this.gridID).kendoGrid({
dataSource: this.dataSource,
autoBind: true,
toolbar: ["create"],
sortable: {
mode: "multiple",
allowUnsort: true
},
columns: [
{ field: "ToField", title: OlapManagerLabels.Field, width: "20%", editor: fieldDropDownEditor.bind(this), template: "#=ToField#" },
{ field: "SpecificOperator", title: OlapManagerLabels.Operator, width: "15%", editor: operatorDropDownEditor.bind(this), template: "#=OlapManagerNamespace.getOperator(SpecificOperator)#" },
{ field: "SpecificValue", title: OlapManagerLabels.Value, width: "30%", editor: valueDropDownEditor.bind(this), template: "#=SpecificValue#" },
{ field: "SecondSpecificValue", title: OlapManagerLabels.SecondValue, width: "30%", editor: secondValDropDownEditor.bind(this), template: "#=SecondSpecificValue#" },
{ command: { name: "x", width: "5%" } }
],
editable: { createAt: "bottom" },
edit: function(e) {
var model = e.model; // access edited/newly added model
// model is observable object, use set method to trigger change event
model.ID = BINamespace.guid32();
model.set("id", model.ID);
},
selectable: true
});
dataSource:
this.dataSource = new kendo.data.DataSource({
data: DataSource,
batch: true,
schema: {
model: {
id: "ID",
fields: {
ToField: { editable: true, required: true },
SpecificOperator: { editable: true, required: true, defaultValue: 6 },
SpecificValue: { editable: true },
SecondSpecificValue: { editable: true },
DataSourceID: { defaultValue: this.dataSourceID },
ID: {},
Type: { defaultValue: 1 },
ToTableID: { defaultValue: this.tableID }
}
}
}
});
ComboBox:
valueDropDownEditor = function (container, options) {
var grid = $("#specificJoinGrid-" + this.gridID).data("kendoGrid");
var row = grid.select();
if (options.model.SpecificOperator != 1 && options.model.SpecificOperator != 0) {
$('<input data-text-field="Key" data-value-field="Key" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: this.globalsDropDownDS,
template: "#=Description# (#=Key#)",
change: value1Changed.bind(this)
});
}
else {
grid.closeCell(container);
}
}
So in case anyone else runs into this problem, I found the solution. Once i removed the autobind: false
property from my editor the combobox works exactly as desired.. not sure why it took me so long to figure this out but hope it helps someone along the way!