1

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) {    

            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

Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
Yousaf Khan
  • 53
  • 8

1 Answers1

0

Do you bind your initial rendering of the igx-grid columns to your column settings? If yes, then the *ngFor would render the columns with the indices that they hold in the ColumnSettings collection. 

<igx-column *ngFor="let column of gridSettings.ColumnSettings" [width]="column.width">
  ...
</igx-column>

Instead of holding the index as a property of the objects in the ColumnSettings array, reorder the array based on the indices. Then rearrange the ColumnSettings array based on the visibleIndex property of the igx-column component, rather than the index property.

The reason to not have an index setter is that when an index of a column changes, the column should either swap with the column at the target index, or the indices of all columns after the target should be incremented up to the source. The behavior of an index setter becomes more complex and opens up for more inconsistencies with pinned columns, as after pinning, the index in the array is no longer reflected by the UI, as a column could be on index 5, but if it's pinned, then it's frozen at the beginning of the grid.

Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
  • 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(); – Yousaf Khan Jan 22 '19 at 06:54
  • If you want to try it at runtime, instead of changing the componentRef columns, do it to your ColumnSettings, which you're bound to, and then call detectChanges() manually on your ChangeDetectorRef. – Konstantin Dinev Jan 22 '19 at 08:53