Kendo 网格：与 Angular 一起使用时如何从组合框单元格模板中获取所选项目

Question

我有一个 Kendo 网格，我在 Angular 中使用它，并且有一个带有组合框的字段，编辑器设置为以下功能...

 function comboCellTemplate(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,
  });

数据是一个简单的 json 对象列表...

[
  {code: 'code1', description: 'desc1'}
  {code: 'code2', description: 'desc2'}
[

网格数据中的每个字段都绑定到相同的对象（即具有代码和描述字段）

我之前 post，要进行排序和过滤，我需要将一个字段绑定到显示字段...

 {
      field: "Category.description",
      title: "Category",
      editor: comboCellTemplate,
      template: "#=Category.description#"
  },

当我这样做时，组合框似乎将网格的字段设置为代码。我如何才能将网格数据设置为整个数据对象（即 {code, description}）

我已经尝试添加一个 on-change 处理程序来执行此操作

  input.on('change', function () {
    var val = input.val();              
            //var dataItem = input.dataItem();
    options.model.set(options.field, val + 'xx');
  });

但看不到如何从组合中获取 "selected Item"

我似乎无法在帮助中找到它（特别是在使用 Angular 时）

如有任何帮助，我们将不胜感激。问候，彼得

Answer 1

好的，我想我已经弄清楚了（经过大量的 doco 潜水之后）

在我发现您可以为列提供 "magical" 比较功能后，我可以让一切正常工作。

所以使用这个，我的字段可以返回绑定到整个 json 对象.. 并按如下方式添加可排序...

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

},

现在一切都如我所愿，我不需要在组合框中做任何额外的事情。我希望这个 ("simple when you know how") 提示可以帮助其他人一直寻找它。

Answer 2

我认为您可以简单地向编辑器添加一个更改处理程序并从那里进行设置：

function comboCellTemplate(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());
        }
    });
}

Kendo 网格：与 Angular 一起使用时如何从组合框单元格模板中获取所选项目

Kendo Grid: how to get the selected item from a Combobox cell template when using with Angular

javascript

kendo-ui

angularjs

kendo-grid