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

Question

我能够执行以下操作kendo-ui-recat-wrapper来获取分组的 Grid ：

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中使用它似乎比包装器更连贯。ReactJsjquery

但我没有找到如何获得相同的结果？没有提到组选项。即使在这里DataState（链接在这里）我也不知道如何使用它？！

编辑：该选项尚未准备好（Kendo ui React路线图）

Answer 1

目前，原生 Kendo React Grid支持分组。语法与 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>
        );
    }
}