Problem in your example of reordering columns on a persistent grid

[Dimitris]

Here https://www.telerik.com/kendo-angular-ui/components/grid/how-to/persist-state/ you are using onReorder function:

public onReorder(e: any): void {

const reorderedColumn = this.grid2Settings.columnsConfig.splice(e.oldIndex, 1);

this.grid2Settings.columnsConfig.splice(e.newIndex, 0, ...reorderedColumn);this.saveGrid2();

}

If you select to start by default with some columns hiddenthe reordering is not working properly.

 

[Dimitris]

It might be the same issue you had before in the jQuery edition and you fixed later:

https://www.telerik.com/forums/reordering-columns-with-hidden-fields-mess-up

[Martin]

Hello Dimitris,

I tried to hide several columns, using the built-in hidden property, but the reordering (and persisting the Grid state) is working as expected, using the example from the shared link.

In  the following demo, I hide the first column initially:

 columnsConfig: [
      {
        field: "ProductID",
        title: "ID",
        filterable: false,
        _width: 40,
        hidden: true
      },

https://stackblitz.com/edit/angular-qgfe8e

Please let me know what I am missing. Thank you in advance.

Regards,
Martin
Progress Telerik

[Dimitris]

Thanks for you answer Marin,

 

I forked the second example here:  https://stackblitz.com/edit/angular-nddh71?devtoolsheight=33&file=app/app.component.ts
I've left only First Ordered On and Unit Price visible by default, the rest are hidden.

Please try the following while you have deleted your localStorage grid variable.

1)
Move Unit Price before First Ordered On so you will have two columns visible in your grid:

1st) Unit Price
2nd) First Ordered On 

2) Click the columns and make visible Product Name and Discontinued.

3) Move Discontinued first and Product Name to 3rd column.
So now you have:
1st) Discontinued 
2nd) First Ordered On 
3rd) Product Name 
4th) Unit Price 

but Check grid2settings in localStorage:

{"columnsConfig":[{"field":"UnitPrice","title":"Unit Price","filter":"numeric","format":"{0:c}","width":180,"filterable":true},{"field":"ProductName","title":"Product Name","filterable":true,"width":300,"hidden":false},{"field":"ProductID","title":"ID","filterable":false,"width":40,"hidden":true},{"field":"FirstOrderedOn","title":"First Ordered On","filter":"date","format":"{0:d}","width":240,"filterable":true},{"field":"Discontinued","filter":"boolean","width":120,"filterable":true,"hidden":false}],"state":{"skip":0,"take":5,"filter":{"logic":"and","filters":[]}}}

Refresh and you have a bad columns re-ordering, isntead of the correct order you will see:
1st) Unit Price 
2nd) Product Name 
3rd) First Ordered On 
4th) Discontinued 

Regards,
Dimitris

[Dimitris]

Even on your second example here: https://www.telerik.com/kendo-angular-ui/components/grid/how-to/persist-state/

https://stackblitz.com/run/?file=app/app.component.ts

just hide two columns, move few of the visible columns to other positions, then make one of those hidden visible and try to re-arrange the columns.

Refresh and they are all messed up.

[Martin]

Hi Dimitris,

Thank you for the additional details provided.

When columns are reordered, columnReorder event is emitted. In the event handler, we demonstrate a sample logic to modify the columns collection based on the oldIndex and newIndex. The implemented logic works as expected if all columns are initially shown.

However, it seems that the same logic does not work well with initially hidden columns. Please keep in mind that the Kendo Angular Grid does not have a built-in persistent mechanism. The purpose of the shown demos is to demonstrate a possible way of achieving state persistence, but any further modifications and adjustments are in the hands of the developer.

Regards,
Martin
Progress Telerik

[Dimitris]

Hi Martin,

 

Not only if they are hidden initially as I commented before your last message.
Even if you start with all columns visible, hide some of them after, re-order columns and then make some columns visible and try to re-order again and you refresh you will see that it's still messing columns order.
If you got an idea of how to fix that, I would like to read it please.

[Martin]

Hello Dimitris,

In columnsVisibilityChange handler, the developer can create a custom array of columns, depending on their visibility, and save them in the local storage.

Regards,
Martin
Progress Telerik