This is a migrated thread and some comments may be shown as answers.

Kendo grid column sorting with selection checkbox

11 Answers 1095 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Larry
Top achievements
Rank 1
Larry asked on 23 Oct 2018, 11:06 PM

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

11 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 24 Oct 2018, 08:36 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Larry
Top achievements
Rank 1
answered on 24 Oct 2018, 05:00 PM
Thanks! 
I was able to resolve the issue. 
0
Alpesh
Top achievements
Rank 1
answered on 15 Jan 2020, 07:40 PM

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

 

0
Stefan
Telerik team
answered on 16 Jan 2020, 10:43 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Alpesh
Top achievements
Rank 1
answered on 16 Jan 2020, 03:12 PM

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

0
Alpesh
Top achievements
Rank 1
answered on 16 Jan 2020, 04:55 PM

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

0
Stefan
Telerik team
answered on 17 Jan 2020, 11:24 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Peter
Top achievements
Rank 1
answered on 28 May 2020, 03:37 AM

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!

0
Stefan
Telerik team
answered on 28 May 2020, 01:29 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Peter
Top achievements
Rank 1
answered on 29 May 2020, 05:43 AM

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

0
Stefan
Telerik team
answered on 01 Jun 2020, 01:27 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Peter
Top achievements
Rank 1
commented on 15 Nov 2021, 06:16 AM

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
Telerik team
commented on 15 Nov 2021, 06:29 AM

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

Tags
General Discussions
Asked by
Larry
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Larry
Top achievements
Rank 1
Alpesh
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Share this question
or