I need to apply user settings on IgxGrid. What I am trying is that whenever a user reorders columns, I am saving the column indices in my database and next time when the user opens the same grid; I need to show the same settings on grid which he saved previously. But when I try to set the column index it says that there is no setter for index property. How can I achieve the functionality to change column indices dynamically? Here is what i am trying to do,
for (var iterator = 0; iterator < gridSettings.ColumnSettings.length; iterator++) { if (this.componentRef.columns != null) { for (let colIndex = 0; colIndex < this.componentRef.columns.length; colIndex++) { if (this.componentRef.columns[colIndex].field == gridSettings.ColumnSettings[iterator].Key) { if (this.enableColumnHiding) { this.componentRef.columns[colIndex].hidden = gridSettings.ColumnSettings[iterator].Hidden; } this.componentRef.columns[colIndex].width = gridSettings.ColumnSettings[iterator].Width; this.componentRef.columns[colIndex].index = gridSettings.ColumnSettings[iterator].Index; break; } } } }
Here is the error which I am encountring,
ERROR Error: Uncaught (in promise): TypeError: Cannot set property index of [object Object] which has only a getter TypeError: Cannot set property index of [object Object] which has only a getter
Hello,
Actually index of IgxColumnComponent has only a getter and it is not allowed to set the index property.
The columns collection of IgxGridComponent is modified and reflects the current state(including the order) of the columns.
If you save the collection as you see it you will have the correct order of the columns.
If you lose their order while saving the state of the grid, they should be re-arranged additionally to be into the desired order.
Let me know if this helps or whether you have some further questions.
First of all thank you for your response. I have tried it earlier to save reordered column collection but it did not reorder columns in grid even though collection was saved correctly.
Here is how I tried to do so,
this.componentRef.columns.splice(0, this.componentRef.columns.length); this.componentRef.columns.push(...columnComponentsWithNewOrder); this.componentRef.reflow();
I prepared a stackblitz sample, which demonstrates restoring the columns state.
https://stackblitz.com/edit/storecols-r4kfc6?
Please review it and let me know if this helps.