Kendo Grid:使用Angular时如何从Combobox单元格模板中获取所选项目

时间:2015-02-09 07:48:57

标签: javascript angularjs kendo-ui kendo-grid

我有一个我在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处理程序来执行此操作

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

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

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

这里的任何帮助将不胜感激。 亲爱的,彼得

2 个答案:

答案 0 :(得分:1)

我认为你可以简单地在编辑器中添加一个更改处理程序并从那里设置它:

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

答案 1 :(得分:0)

好吧,我认为我已经深究了这一点(经过doco的大量潜水后)

在我发现你可以给一个专栏&#34;魔法&#34;比较功能。

所以使用这个,我的字段可以回到绑定到整个json对象.. 并按以下方式添加sortable ......

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

},

现在一切都按照我的预期完成,而且我不需要在组合框中做任何额外的事情。我希望这(#34;当你知道&#34时很简单;)提示可以在我找到它的所有时间内保存其他人。