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)
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.
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.
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>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With