如何对 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'
    }   ] }

然后我可以将其传递给 Grid 的 dataSource 道具。

我更新到 kendo-react-grid 在 ReactJs 项目中使用它似乎比 jquery 包装器更连贯。

但我没有找到如何获得相同的结果？没有提到组选项。即使在 DataState (link here) 中，我也不知道如何使用它？！

编辑：选项尚未准备好（Kendo ui React roadmap）

Answer 1

目前，native Kendo React Grid supports grouping. The syntax is different than as per the jquery wrapper (i.e. there is no dataSource prop) but I believe this is expected. Here is a simplified version of the official 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>
        );
    }
}