Kendo Grid: How To Get The Selected Item From A Combobox Cell Template When Using With Angular

I have a Kendo grid which I am using within Angular, and have a field with a combo box, that has the editor set to the following function... function comboCellTemplate(container,

Solution 1:

I think you can simply add a change handler to the editor and set it from there:

functioncomboCellTemplate(container, options) {
    var input = $('<input name="' + options.field + '" />')
    input.appendTo(container)
    var combobox = input.kendoComboBox({
        autoBind: true,
        filter: "contains",
        placeholder: "select...",
        suggest: true,
        dataTextField: "description",
        dataValueField: "code",
        dataSource: data,
        change: function () {
            options.model.set(options.field, this.dataItem());
        }
    });
}

Solution 2:

Ok, I think I have got to the bottom of this (after lots of diving through the doco)

I could get everything to work after I discovered that you can give a column a "magical" compare function.

So using this, my field can go back to binding to the whole json object .. and add the sortable as follows...

{
  field: "Category",
  title: "Category",
  editor: comboCellTemplate,
  template: "#=Category.description#",
  sortable:{
        compare: function (a, b){
          return a.Category.description.localeCompare(b.Category.description);
        }

},

Now everything works exactly as I expect, and I don't need to do anything extra in the combobox. I hope this ("simple when you know how") tip can save someone else all the time it took me to find it.