Kendo grid column sorting with selection checkbox

[Larry]

Hello,

I am currently using kendo react sorting along with selection checkbox. Currently, when I sort any of the columns, it automatically checks the header selection checkbox along with this message:

Warning: A component is changing a controlled input of type checkbox to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

 

Is there no way to use both sorting and selection checkboxes together in react? There's no way of me being able to see what is going on in the background and what this message is even trying to say.

Thanks

[Stefan]

Hello, Larry,

I made an example with checkbox selection and sorting which is working as expected:

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

Please take a look at the example and advise the differences that it has compare to the real application.

Regards,
Stefan
Progress Telerik

[Larry]

Thanks! 
I was able to resolve the issue. 

[Alpesh]

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

 

[Stefan]

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

[Alpesh]

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

[Alpesh]

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

[Stefan]

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

[Peter]

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!

[Stefan]

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

[Peter]

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

[Stefan]

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

[Peter]

Hi,

I know it has been quite a while since this post. Was just wondering if there were any updates regarding this functionality?

Thanks,
Peter

[Stefan]

Hello, Peter,

This is already resolved with the new processWithGroups method. We have an example showcasing how it can be done with the new method:

https://www.telerik.com/kendo-react-ui/components/grid/grouping/#toc-persist-groups-collapsed-state