Column Moving using API

[amitohale]

Ability to reorder columns using API

Current grid allow columns reordering via standard drag/drop mouse or touch gestures. It does not allow us to reorder based on saved preferences (somewhere.. say localstorage).

Support must be added to set column position in a grid.

1. setColumnIndex(column: IgxColumnComponent, index: number): Set column position to index

[zdrawku]

Hey @amitohale, thank you for the feature suggestion, while we review the Feature Request and plan it for the upcoming sprints you may use this temporary solution.

The sample demonstrates how to change the columns order based on column field name by using a ComponentFactoryResolver, which will help us to create new column instances and add them to the cleared columnListlist.

Code snippet:

changeColumnsOrder(): void {
      const newColumns = [];
      let newColumnsOrder = [];
      this.grid.columnList.forEach(col => newColumnsOrder.push(col.field));
      const factory = this.resolver.resolveComponentFactory(IgxColumnComponent);
      newColumnsOrder = this.asc ? newColumnsOrder.sort().reverse() : newColumnsOrder.sort();

      newColumnsOrder.forEach(colField => {
          const ref = factory.create(this.viewRef.injector);
          const col = this.grid.columnList.find(c => c.field === colField);
          Object.assign(ref.instance, col);
          ref.changeDetectorRef.detectChanges();
          newColumns.push(ref.instance);
      });

      this.grid.columnList.reset(newColumns);
      this.grid.columnList.notifyOnChanges();
    }

[amitohale]

Thanks @zdrawku, this works for me.

[zdrawku]

The feature-request is added to our Queue part of the Master Backlog, you will be updated accordingly for any change of its state.

[github-actions]

There has been no recent activity and this issue has been marked inactive.

[zdrawku]

As @hanastasov pointed out while we were discussing the FR, we can expose API method (column-based) that will change the column index and reset the columnist collection (similar to the moveColumn API implementation).

list.splice(toIndex, 0, ...list.splice(fromIndex, 1));
this.columnList.reset(list);

I am marking this FR for the next milestone