ag-Grid - how to force custom sorting after data is added or modified

user_2497278 0
Viewed 6403

I am trying to use custom sorting on a column in ag-Grid in my Ionic 4/Angular 8 application.

I have a sample application here, or on Stackblitz I can't get it to run on Stackblitz, but it definatley runs locally,

At any rate a couple of things to note are I want the grid to run in virtual mode (eg may have 1000 rows of data), and also I have set this.gridOptions.immutableData = true; to handle my data from ng/rx.

Also I am using a component as a cell template, but I think we can ignore that here (using an existing example)

I wish to have the rows sorted, and so calling my dateComparator function both

  • When I first load the data
  • If I have any data added or updated

To emulate new data coming in from a server, I have an add button which calls the add method.

I have added a comparator on the column...

        public ngAfterViewInit(): void {                
            const self = this;
            this.gridOptions.immutableData = true;
            this.gridOptions.animateRows = true
            this.gridOptions.api.setColumnDefs([
            {
                    headerName: 'myheader',
                    comparator: self.dateComparator,
                    sortable: true,
                    field: 'equipment',
                    cellStyle: { padding: 0 },        
                    cellRendererFramework: TemplateRendererComponent,              
                    cellRendererParams: {
                        ngTemplate: this.itemCard
                    },        
                },
            ]);

            this.setData();
            }

    private dateComparator(valueA, valueB, nodeA, nodeB, isInverted): number {
       console.log('sorting');
       return 1;
     }

However, when I load the grid, or call the above add method, my dateComparator is not being called. It is only called if I click the column header.

I have tried calling this.gridOptions.api.redrawRows() but this does not cause it to sort. I can't see any other obvious sort function to call.

My question is, how can I have this sorting applied automatically without clicking the column header (ie when I load or update my data)?

ag-grid-angular ag-grid angular
1 Answers

To sort a column by default, you have to specify the sorting attribute in the colDef - 

sort: 'desc', // asc or desc

You can also do this after grid is initialized using sorting api - 

var sort = [
  {
    colId: 'country',
    sort: 'asc',
  },
  {
    colId: 'sport',
    sort: 'asc',
  },
];
this.gridApi.setSortModel(sort); // provide sort model here

Now, when your data is updated and you need to let the grid know to maintain the sorting as per your custom comparator, you need to call - onSortChanged()

As per docs-

onSortChanged()
Gets the grid to act as if the sort was changed. Useful if you update some values and want to get the grid to reorder them according to the new values.

Example on applying sort model here

user_9839290
Related