繁体   English   中英

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

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

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

 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'}
[

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

在上一篇文章中,要进行排序和过滤,我需要将一个字段绑定到显示字段...

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

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

我试图添加一个on-change handler来做到这一点

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

但看不到如何从组合中获取“选定项”

我似乎无法在帮助中找到它(特别是在使用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,
        change: function () {
            options.model.set(options.field, this.dataItem());
        }
    });
}

好吧,我想我已经深入到此(经过大量潜水经历)

当我发现您可以为列赋予“神奇”的比较功能后,我便可以进行所有工作。

因此,使用此字段,我的字段可以返回绑定到整个json对象..并按如下所示添加sortable ...

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

},

现在,一切都按我的预期工作,并且不需要在组合框中执行任何其他操作。 我希望这个技巧(“简单易懂”)可以在我花了很多时间才为别人省掉。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM