2

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

Fiibbzz
  • 21
  • 7
  • If you like my answer/ it works can you accept it so i know otherwise ill delete it so im not wasting others time who want to see the answer to this question ( they may have a similiar issue) – Montresor Dec 22 '20 at 18:48
  • @MontresorXPL thanks, but your suggestion solves another use case. It´s for switching visibility of one or more columns. (see also: https://stackoverflow.com/a/56294034/13123094) That´s not what I´m looking for. I want to sort columns in the inner column section of the tool panel but couldn´t find the right api or event handler. – Fiibbzz Dec 23 '20 at 08:14
  • Thanks that’s ok – Montresor Dec 23 '20 at 09:46

1 Answers1

1

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.

santos
  • 434
  • 3
  • 6
  • Update: The 26.1.0 release of Ag Grid appears to resolve this. Search for AG-4139 and it's been marked as 'Done'. – santos Sep 27 '21 at 08:08