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

onColumnResize & onColumnReorder in Grid Component

1 Answer 59 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Darren
Top achievements
Rank 1
Darren asked on 23 Sep 2020, 07:38 AM

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!

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 23 Sep 2020, 01:10 PM

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?

Regards,
Stefan
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).

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