Is there way moving columns in the column section of the tool panel of AG-Grid?

Question

I'm very new to ag-grid. I'm searching for a way to order columns in the columns selection of the tool panel. (see also the image below, it's a cutout of the official documentation: https://www.ag-grid.com/javascript-grid-tool-panel-columns/#suppress-sections)

Image: column section tool panel of ag-grid

I know that sorting columns by drag and drop them in the grid is possible. For this case I set the option defaultColDef: { sortable: true } (https://www.ag-grid.com/javascript-grid-sorting/) This will also be synchronized with the list in the tool panel.

But the reason for my special use-case is: it´s harder to scroll and sort 20-30 whole columns horizontally than sorting a list of names vertically like in the mentioned tool panel. That´s why i´m trying to sort/reorder columns in the tool panel with something like a drag and drop event. But i couldn´t find a way to access something like the columns tool panel api.

I also found an entry in the ag-grid enterprise support, where my use case is called as a to complex feature but this post is now two years old. And the mentioned ticket number of this feature I couldn't found in their pipeline anymore. (see also: https://ag-grid.zendesk.com/hc/en-us/articles/360004964851-Can-I-change-the-order-of-the-columns-in-the-tool-panel-NOT-YET-NO-ETA-)

user_569778 · Answer

As we recently bought enterprise licenses for Ag Grid and also came up against this problem, I contacted them directly about this. It's an item that is being tracked on their product backlog (no scheduled release yet - https://www.ag-grid.com/ag-grid-pipeline/ search for 4139). In the meantime I had to work around this by a implementing a combination of my own drag and drop re-ordered list and the Ag Grid column API moveColumn(colKey, toIndex) method. (https://www.ag-grid.com/angular-grid/column-api/). Regarding the drag and drop list, there are many options out there but we used Angular material UI https://material.angular.io/cdk/drag-drop/overview#reordering-lists which was pretty straight forward. In the material UI link above, they provide a code sample dropevent handler which combined with Ag column API looks something like this:

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  columnApi.moveColumn(colKey, event.currentIndex); // this is the Ag Grid column api
}

This isn't the best solution but is a stop gap until they implement the feature.

drop(event: CdkDragDrop) {
  moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  columnApi.moveColumn(colKey, event.currentIndex); // this is the Ag Grid column api
}

This isn't the best solution but is a stop gap until they implement the feature.

Is there way moving columns in the column section of the tool panel of AG-Grid?

1 Answers