kendo-ui - 网格如何将多列合二为一

Question

我正在尝试将两列绑定到一个剑道网格列中。下面似乎不起作用。

var grid = $("#grid").kendoGrid({
                dataSource: { data: SomeData },
                columns: [{
                    field: "Column1" + "Column2"
                }]

            }).data("kendoGrid");

Answer 1

如果您不需要编辑单元格，您可以执行所谓的组合单元格或合成，它是使用 KendoUI 实现的template。（尝试在谷歌上搜索“带有组合单元的 kendoui 网格”）。

例子

var leitmotifs = [
    { 
        company: "OnaBai", 
        leitmotif: "Working on a cloud of documents!" 
    },
    { 
        company: "Nike", 
        leitmotif: "Just do it!" 
    }
];

var grid = $("#table").kendoGrid({
    dataSource: {
        data: leitmotifs
    },
    columns   : [
        { 
            title: "Company", 
            template: "#= company + ' : ' + leitmotif #"
        }
    ]
});

Answer 2

您是否查看过 DataSource 上的schema.parse方法？您可以在那里将列添加为没有问题的新字段。然后，当您到达网格时，该字段将可用。

dataSource: {
  transport: {
    read: "things"
  },
  schema: {
    parse: function (data) {
      // return a new collection which has a new field
      // that adds fields 2 and 3 together
      return $.map(data, function(item) {
       item.field4 = item.field2 + item.field3;
          return item;
      });
    }
  }
}

这是一个例子......

http://jsbin.com/azizaz/1/edit

Answer 3

这是一个不同的解决方案，它还提供了在任一字段上独立排序的能力，同时仍保留单列数据。

columns: [
   {  // cell data 
      headerAttributes: { style: "display:none;" },
      attributes: { colspan: 2 },
      template: "#= field1 # #= field2 #"
   },
   {  // field 1 data
      field: "field1",
      title: "Field 1",
      attributes: { style: "display: none;" },
      template: ""
   },
   {  // field 2 data
      field: "field2",
      title: "Field 2",
      attributes: { style: "display: none;" },
      template: ""
   }
]