javascriptkendo-uikendo-mvvmkendo-combobox

Kendo Combobox inside kendo grid edit not working


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);
    }
}

Solution

  • 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!