CODEWITHSUNDEEP
angularjsag-grid
Neeraj Jain
Neeraj Jain

Reputation: 7730

How to disable sorting for a specific columns in Ag-grid?

I am using https://www.ag-grid.com/ in one of my AngularJs projects.My requirement is to disable the sorting on any column while any grouping is happening.

I know we can disable sorting/filtering on single column with below configuration:

colDef.suppressMenu = true
colDef.suppressSorting = true <--- this i can set up while giving column definition

but how to do it dynamically on the specific condition, For more clarification please check the image below enter image description here

In this, I am grouping the grid by country and expanding Ireland country but now I don't to disable sorting on any parameter and enable it again when grouping attribute is removed.

Is there a way to achieve this, Please let me know and if any duplicate question already exists please add that in the comment section.

Thanks

Upvotes: 10

Views: 21391

Answers (3)

Fede Garcia
Fede Garcia

Reputation: 797

the property for suppressing sorting is now

sortable: false

https://www.ag-grid.com/javascript-grid-sorting/

Upvotes: 11

Neeraj Jain
Neeraj Jain

Reputation: 7730

Finally, I solved the problem :), adding answer so it might help others

Note: I am not relying on Ag-Grid grouping I am getting after grouped data from my backend so below details can change for guys depending on Ag-Grids only

Ag-Grid provides various event listener, one of which is columnRowGroupChanged

So I registered this listener :

vm.gridOptions.api.addEventListener("columnRowGroupChanged", vm.updateRowData);

Then in updateRowData method where i am creating my headerRow which will be used by Ag-Grid after grouping, I am also configuring at that time whether to sort or not :

vm.updateRowData = function (groupedColumnInfo) { 
                                /\
                                ||
                                ||
                           Column Information on which grouping has been done

............
............
 // Some Processing to get required details and finally setting the header again
............
............
vm.headerData = {
    headerName: groupingAttributeItem.label,
    field: fieldName,
    width: 150,
    headerClass: 'groupable-header',
    cellClass: 'groupable-cell p-xs',
    key: groupingAttributeItem.key,
    sort: (params.sortingInfo && params.sortingInfo.colId === groupingAttributeItem.key) ? params.sortingInfo.sort : '',
    suppressSorting: groupedColId ? true : false <--- deciding factor 
};

  // *Deciding factor* line checks that if some grouping has been done
 // if NO then don't suppress sort for that column otherwise enable sorting
}

Note: By default sorting is enabled on all columns so we have to explicitly disable it.

This is only the snippet of my complete code base, hence skipped how getting label and other things.

Hope it helps someone Thanks....

Upvotes: 2

Chawki Messaoudi
Chawki Messaoudi

Reputation: 762

colDef.suppressMenu = true
colDef.suppressSorting = true

http://www.angulargrid.com/angular-grid-column-definitions/index.php

Exemple: http://jsfiddle.net/7ony74h5/1/

Upvotes: 2

Related Questions