Kendo Grid:按列表中的第一个元素分组

时间:2014-08-04 16:45:31

标签: javascript kendo-grid

所以我正在使用Kendo Grid以及它的标题是如何分组的。我目前正在使用的一个选项是Grid通过检查该列表中的每个元素来获取我的列表和排序组。所以我得到了类似的东西:

  

- >角色:

     

- >角色:测试员,经理,团队负责人

     

- >角色:测试员

     

- >角色:CEO,Tester

     

- >角色:团队负责人,首席执行官

(你明白了)。这是因为我的数据库模型中的“角色”在一个列表中(因为一个人可以有很多角色),而Kendo Grid正在比较该列表中的每个元素。但是,我希望它只按每个人列表中的第一个元素进行分组,所以我改为:

  

- >角色:测试员

     

- >角色:经理

     

- >角色:团队负责人

     

- >角色:

     

- >角色:CEO

等。有谁知道如何做到这一点?目前我在做

group: {
                field: "RoleName",
                aggregates: [
                    { field: "ResourceName", aggregate: "count" },
                    { field: "OrganizationName", aggregate: "count" }
                ]
            },

我认为我想做更多的事情:

group: {
                field: "RoleName.get(0)",
                aggregates: [
                    { field: "ResourceName", aggregate: "count" },
                    { field: "OrganizationName", aggregate: "count" }
                ]
            },

但是,我对Kendo Grid不太熟悉,不知道正确执行此操作的语法。提前感谢您的帮助!

编辑:我应该补充一点,因为许多将使用它的人仍然需要IE8支持,我使用的是从/2012.2.710导入的Kendo Grid,而不是最新的更新

2 个答案:

答案 0 :(得分:1)

*编辑我的答案假设用户在函数外部加载数据并且不在数据中编写硬编码。

尝试使用模式中的解析函数

我只是添加你已经在项目中应该拥有的东西,例如:



$('.grid').kendoGrid({
  dataSource: {
    schema: {
      parse: function(data) {
        for (var i = 0; i < data.length; i++) {
          data[i].firstWord = data[i].name.split(' ')[0];
        }
        return data;
      }
    }
    group: {
      field: "firstWord"
    }
  },
  columns: [{
    field: "name"
  }, {
    field: "firstWord",
    hidden: true,
    groupHeaderTemplate: "#=value#"
  }]
});
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这只是对Ryan Hoyle answer's example的解决方法:

&#13;
&#13;
var grid = $('#grid').kendoGrid({
  dataSource: {
    data: [{
      name: 'Hello world'
    }, {
      name: 'Hello John Doe'
    }, {
      name: 'Hello Jane Doe'
    }, {
      name: 'Bye Jane Doe'
    }, {
      name: 'Bye World'
    }],
    schema: {
      parse: function(data) {
        data.forEach(d => d.firstWord = d.name.split(' ')[0]);
        return data;
      }
    },
    group: {
      field: "firstWord"
    }
  },
  columns: [{
    field: "name"
  }, {
    field: "firstWord",
    hidden: true,
    groupHeaderTemplate: "#=value#"
  }]
}).data().kendoGrid;
&#13;
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

<div id="grid"></div>
&#13;
&#13;
&#13;