onColumnResize & onColumnReorder in Grid Component

2 posts, 0 answers
  1. Darren
    Darren avatar
    1 posts
    Member since:
    Jan 2020

    Posted 23 Sep 2020 Link to this post

    Hi Kendo UI Community.

    My team and I are currently encountering some difficulty with our implementation of the KendoReact Grid component. Particularly in regards to our implementation of the onColumnResize and onColumReorder functions we pass to the Grid.

    A little bit of context: we get our columns from a redux store which we populate with data from a proprietary backend. We wish to maintain the array of columns here so that we can use our existing architecture to send these columns to the backend for serialization.

    The problem is that for the onColumnResize function we accept "columns" and "index" as parameters. We use this index as an array index for our columns in redux. Everything works as expected when an end user has not manually reordered the columns. However; once the columns are reordered an orderIndex is applied and it is no longer correct, for the onColumnResize function, to use the "index" parameter as an array index.

    We want to avoid using any conditional logic in our onColumnResize function to determine whether we should be accessing the column via the array index or the orderIndex. Ideally the orderIndex would always exist or the columns would come back from Kendo in a sorted array.

    Does anyone have any suggestions please? 

    Thank you in advance for any suggestions, guidance or advice!

  2. Stefan
    Stefan avatar
    3034 posts

    Posted 23 Sep 2020 Link to this post

    Hello, Darren,

    Thank you for all of the details.

    In this case, we can suggest using the orderIndex all the time. As soon as the columns collection is retrieved from the server, process the columns collection, and add an orderIndex field equal to the index. This way the columns will have orderIndex initially even if they are not reordered yet.

    Please let me know if there are any issues using this approach?

    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top