Kendo grid column sorting with selection checkbox

12 posts, 0 answers
  1. Larry
    Larry avatar
    2 posts
    Member since:
    Oct 2018

    Posted 23 Oct 2018 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 24 Oct 2018 Link to this post

    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
  3. Larry
    Larry avatar
    2 posts
    Member since:
    Oct 2018

    Posted 24 Oct 2018 in reply to Stefan Link to this post

    Thanks! 
    I was able to resolve the issue. 
  4. Alpesh
    Alpesh avatar
    3 posts
    Member since:
    Jan 2020

    Posted 15 Jan 2020 in reply to Stefan Link to this post

    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

     

  5. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 16 Jan 2020 Link to this post

    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
  6. Alpesh
    Alpesh avatar
    3 posts
    Member since:
    Jan 2020

    Posted 16 Jan 2020 in reply to Stefan Link to this post

    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

  7. Alpesh
    Alpesh avatar
    3 posts
    Member since:
    Jan 2020

    Posted 16 Jan 2020 in reply to Alpesh Link to this post

    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

  8. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 17 Jan 2020 Link to this post

    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
  9. Peter
    Peter avatar
    3 posts
    Member since:
    Apr 2020

    Posted 27 May 2020 in reply to Stefan Link to this post

    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!

  10. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 28 May 2020 Link to this post

    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.
  11. Peter
    Peter avatar
    3 posts
    Member since:
    Apr 2020

    Posted 29 May 2020 in reply to Stefan Link to this post

    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

  12. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 01 Jun 2020 Link to this post

    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.
Back to Top