Kendo Grid: Setting Model fields on combox selecti

Question

this follows in from another post to do with setting a grid's selected fields when we have a data source field (and combo fields) with a json object (as opposed to a simple string).

So if we look at the change event handler for the following combox...

function createCombo(container, options, data) {
  var input = $('<input name="' + options.field + '" />')
  input.appendTo(container)
  input.kendoComboBox({
  autoBind: true,
  filter: "contains",
  placeholder: "select...",
  suggest: true,
  dataTextField: "display",
  dataValueField: "rego",
  dataSource: data,
  change: function () {                     
    var dataItem = this.dataItem();
    var dataField = options.field.split('.');

     var fieldName = dataField[0];          
     options.model.set(fieldName + '.rego', dataItem.rego);
     options.model.set(fieldName + '.display', dataItem.display);      
    }
 });
 }

I am setting my 2 fields as follows...

    options.model.set(fieldName + '.rego', dataItem.rego);
    options.model.set(fieldName + '.display', dataItem.display);      

(each item in the combo, and the grid data source has a json object with a 'rego' and 'display' field, see full example here.

This seemed to work exactly as I wanted, but I had just had someone point out to me that when you scroll the combobox with the up/down arrow keys, it just seems to toggle between 2 values in the list, as opposed to iterating through all the items. If I remove the 2 'options.model.set' statements, the combo then behaves.

I am really hoping there is a work around this, but everything I Have tried makes no different.

If there were any suggestion to finish this off, it would be greatly appreciated!

Thanks in advance for any help

Answer 1

Since you're modifying the model manually, you should to remove the name=... attribute from the input (otherwise the grid will also modify the model; you could also use name="car.rego" - it has to be the value field - and then not set the combobox value in the config) and also only call set for the last change you make on the model (otherwise, the grid's save event will get triggered twice, once with invalid data).

So you editor would look like this:

function createCombo(container, options, data) {
    var dataField = options.field.split('.');
    var fieldName = dataField[0];

    var input = $('<input/>')
    input.appendTo(container)
    input.kendoComboBox({
        autoBind: true,
        filter: "contains",
        placeholder: "select...",
        suggest: true,
        dataTextField: "display",
        dataValueField: "rego",
        dataSource: data,
        value: options.model[fieldName].rego,
        change: function (e) {
            var dataItem = this.dataItem();
            options.model[fieldName]['rego'] = dataItem.rego;
            options.model.set(fieldName + '.display', dataItem.display);
        }
    });
}

Also, your data should be consistent (in one DS, you use "C1" as rego, in the other "CAR1").

(demo)