Kendo grid column sorting with selection checkbox

Hi Stefan,

We are going to use KendoUI React for our new project. We are going to develop application as below.

Page 1) Develop Login Page

Page 2) Show List data to table or Grid where user can select / multiselect / filter / sort.

Page 3) Detail page which get open based on user's selection from page 2. Page 3 contains details information about each list item and user can edit single/multiple list based on page 2 selection.

Can you please provide an exmaple of using KendoUI with Selection, filtering and Sorting features of Grid? In your current link i see it contains Selection and Sorting but not filtering.

Thanks

Hello, Alpesh,

When there are will be multiple data operation we suggest using the onDataStateChange event as it will combine the entire data state(sorting, filter, grouping, and paging:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-ondatastatechange

Also, the process method will apply all operations over the data:

https://www.telerik.com/kendo-react-ui/components/dataquery/api/process/

This is the updated example:

https://stackblitz.com/edit/react-xmw9xs-cdzcmd?file=app%2Fmain.js

Regards,
Stefan
Progress Telerik

Hi Stefan, Thanks for the information. I am still confuse with update functionality. Do we have onClick event like React?

Single Item update :-   Just like click on single ROW and it will open detail page for it and user can update any value for that particular item.

Multi or Mass Update :-  where user will click on UPDATE button (after selecting multiple row) and it will open detail page where user can update the "Units in Stock". Let's say user change "Units in Stock" value to 20 and it get updated for each item as 20.

For Example, https://stackblitz.com/edit/kendo-react-redux

Here, i need checkbox selection feature and update button along with detail page. Can you provide simple example where i can follow this KendoUI-react-redux.

Side Question:: Can we use MOBX with KendoUI?

Thanks

Here is online demo where i am implementing Selection and Update features.

Link: https://stackblitz.com/edit/kendo-react-redux-g6rrpe?file=Grid%2FReduxGrid.js

Hello, Alpesh,

Thank you for sharing the example.

In regards to the features:

1) The single update is already present in the provided example.

2) The mass update has to be made programmatically. For example, click a specific button in the Grid will open a Window or a Dialog component.

Then this component has to render editors for each field. Then after finishing the updates, they have to be applied to old records that are selected.

Also, I saw that this example is using the Kendo UI wrapper Grid for React which is based on our Kendo UI Grid for jQuery:

https://demos.telerik.com/kendo-ui/grid/index

https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview

We also have a native React Grid part of the KendoReact components:

https://www.telerik.com/kendo-react-ui/components/grid/

Please take a look at both and determine which one will be better for the applciation based on the features.

If this will be a React application, we recommend the KendoReact Grid as it is made with the React specifics in mind.

Regards,
Stefan
Progress Telerik

Hi Stefan,

This is a great example, but would you be able to add in grouping? I'm looking to do something exactly like this but with the grouping feature enabled and am having some trouble getting it all working together...

Thanks!

Hello, Peter,

As the post has multiple examples, is it possible to clarify which example has to be extended with grouping?

Also, some details on the current issues when adding the grouping can help us provide more to the point suggestions.

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks for the reply. I was referring to this example:

https://stackblitz.com/edit/react-xmw9xs?file=app/main.js

Is it possible to add grouping here? I'm trying to get a grid that supports checkbox selection and grouping together. I have an example (below), however when grouping at multiple levels it fails when expanding / collapsing a group.

https://stackblitz.com/edit/grid-grouping-selection?embed=1&file=index.js

Thanks,

Peter

Hello, Peter,

Thank you for the clarification.

I saw that there was a ticket submit with a similar issue.

Indeed this will require an enhancement from our side as currently, the groups created by the process method are not unique. Currently, there are two options:

1) The one shown in the example, where the issue is that two groups with the same value will be both expanded and collapsed.

2) Using index instead of value, the issue with that approach is that if we sort or filter the data, a different group may be on that index.

We are searching for a third option that will eliminate the issue of both approaches.

We have logged here and I will post the link, so if anyone else has the same issue they can follow it and share ideas:

https://github.com/telerik/kendo-react/issues/500

Regards,
Stefan
Progress Telerik