如何在Kendo UI网格中对行进行分组

Question

我能够使用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的Grid道具。

我更新到了kendo-react-grid，与jquery包装器相比，在ReactJs项目中使用它似乎更有条理。

但我没发现怎么得到同样的结果？没有提到小组的选择。即使在DataState (链接在这里)，我也不知道如何使用它?！

路线图)编辑:该选项尚未准备好(Kendo )

Answer 1

目前，本机Kendo React支持分组。它的语法不同于jquery包装器(即没有dataSource支持)，但我相信这是应该的。以下是官方分组示例的简化版本：

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