如何在Kendo UI Grid中对行进行分组

时间:2018-03-01 11:19:36

标签: reactjs kendo-ui kendo-ui-grid kendo-react-ui

我能够使用kendo-ui-recat-wrapper执行以下操作来获取分组网格:

let dataSource = {   
  data: data,   
  schema: {
    model: {
      id: 'id',
      expanded: true
    }   
  },   
  group: [
    {
      field: 'title', // GroupBy goes on this field
      dir: 'asc'
    }   ] }

然后我可以将其传递给dataSource的{​​{1}}道具。

我更新到Gridkendo-react-grid项目中使用它似乎比ReactJs包装更一致。

但我没有找到如何得到相同的结果?没有提到团体选项。即使在jquerylink here),我还没有得到如何使用它?!

编辑:该选项尚未准备好(Kendo ui React roadmap

1 个答案:

答案 0 :(得分:1)

当前,native Kendo React Grid支持grouping。语法与jquery包装器不同(即没有dataSource属性),但我相信这是可以预期的。这是官方grouping示例的简化版本:

import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { groupBy } from '@progress/kendo-data-query';
import products from './products.json';

class App extends React.PureComponent {
    render() {
        return (
            <Grid
                groupable={true}
                group={[ { field: 'UnitsInStock' } ]}
                data={groupBy(products, [ { field: 'UnitsInStock' } ])}
            >
                <Column field="ProductID" title="ID" width="50px" />
                <Column field="ProductName" title="Product Name" />
                <Column field="UnitsInStock" title="Units In Stock" />
            </Grid>
        );
    }
}