Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to group rows in Kendo UI Grid

Tags:

I was able to do the following using kendo-ui-recat-wrapper to get a grouped Grid :

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

And Then I can pass this to the dataSource props of Grid.

I updated to kendo-react-grid it seems more coherent to use in a ReactJs project than the jquery wrapper.

But I didn't find how to get the same result ? There is no mention to the group option. Even here in DataState (link here) I didn't get how to use it ?!

EDIT : The option is not ready yet (Kendo ui React roadmap)

like image 464
Zied Hf Avatar asked Mar 01 '18 11:03

Zied Hf


People also ask

How do I group data in kendo grid?

To enable grouping, set the groupable option to true . As a result, the Grid exposes a new area in its header which enables the user to group the Grid data by a column. To group the data by multiple columns, users can drag the desired columns to the grouping header.

What is Kendo grid in MVC?

Kendo UI Grid is an easy, more maintainable, and powerful control for displaying data in a tabular format. Kendo provides many options, such as paging, sorting, filtering, grouping, and editing. These features determine the way data is presented and manipulated.


1 Answers

Currently, the 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 example:

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>
        );
    }
}
like image 174
Asen Arizanov Avatar answered Sep 21 '22 05:09

Asen Arizanov