Как сгруппировать строки в Kendo UI Grid

Я смог сделать следующее, используя 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, он кажется более последовательным для использования в проекте ReactJs, чем оболочка jquery.

Но не нашел, как получить такой же результат? Нет упоминания о групповом варианте. Даже здесь, в DataState (ссылка здесь) Не понял, как им пользоваться ?!

РЕДАКТИРОВАТЬ: опция еще не готова (Kendo ui React план действий)


reactjs kendo-react-ui kendo-ui kendo-ui-grid
person Zied Hf    schedule 01.03.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

В настоящее время собственная сетка 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>
        );
    }
}
person Asen Arizanov    schedule 17.09.2018