Grid - Column Reordering not working when using the reorder event

[jannhofman]

I'm submitting a...

• Bug report

Current behavior

1. We hold our column configuration array in our component state (state.columns)
2. In render method we render Kendo JSX Element for each column in state.columns
3. On Kendo Grid columnReorder Event we get new Column Order
4. Now we need to update state.columns to reflect the new Column Order. At this Point the Column order is changed again and messed up.

Expected behavior

The column order should not be affected

Minimal reproduction of the problem with instructions

i attached a small sample Site

What is the motivation or use case for changing the behavior?

We need to update state.columns because other Components independent of the kendo grid have to reflect the new order too.

Environment

0.5.0

Browser:

• Firefox

Sample
kendoReactTest.zip

open console and run
npm install
npm run dev

[Xizario]

The Columns have orderIndex property that can control their order in such cases and have higher priority than the build-in reordering.

          <Column orderIndex={2} field="CategoryID" />
          <Column orderIndex={0} field="CategoryName" />
          <Column orderIndex={1} field="Description" />

Will render them in CategoryName -> Description -> CategoryID

Seems to be missing in the documentation.

[jannhofman]

Thx for this suggestion, but for me its still not working as expected.
I create the table without any orderIndex - the rendering is fine. Then we reorder the columns by drag & drop. In the event we get the new order index and the column order is correct. In the event handling we use this orderIndex to update our state. The following rerender triggers a grid props update with the new colums array inclunding the set orderIndex.
If we try to reordering by drag & drop again, nothing changes visually. In the event every column has the same orderIndex as before.

It is the same behavior if we try to set an orderIndex initially.

What am i missing?

[Xizario]

I see your point. It is a bug indeed.

We will fix the arguments in the columnReorder to be sure it contain the correct new("intended") orderIndexes in case the columns already have such and are in controlled state.

Currently you can clear the unOrderedColumns, during the event, it is a collection that the grid uses to store the column props that it got from the markup.

Here is an live example that should cover your requirements.
https://stackblitz.com/edit/react-grid-column-reorder

[jannhofman]

Perfect, this workaround does the trick for now.

[Xizario]

Version 0.6.0 is live. The workaround is not longer required. The update version of the demo using the latest version is here: https://stackblitz.com/edit/kendo-grid-sync

[sachinjadh]

Guys we are facing similar issue but its with angular and not react. We are trying to set something like
" this.columnSub = this._settings.psvActiveColumns.subscribe((cols: ColumnConfiguration[]) => {
this.columns = [...cols];
});
"
Use Case-
We have a service that updates the columns included or reordered through a separate component. When using drag-to-reorder through the Grid UI, and then changing the column order through this separate component, when the columns are then assigned in the above subscription, the grid does not re-render with the specified column order. If we force the subscription to take again, through repeating the UI action of the separate component or re-initializing the grid's parent component, the columns are rendered accurately. Any thoughts on this ?

[simonssspirit]

@sachinjadh If the issue is for the Angular Grid, please submit it in the Kendo Angular repository, so the team can take a look at it: https://github.com/telerik/kendo-angular/issues