Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 511
Neeraj Jain Avatar asked May 25 '17 08:05

Neeraj Jain


People also ask

How do I turn off sorting in columns?

To disable sorting for one column, select the name of this column in the list below Customize columns, and then de-select Make sortable: To deselect sorting for all columns, you'll first need to select all columns at once.

How do you do custom sorting on Ag-grid?

Sorting is made available very easy in Ag-Grid. All you have to do is add a property sortable: true in column defination. Default sorts: If you are wishing to have to default sorting order, then add sortingOrder:['desc'] which will give you default descending sorting order.

How do you make the sorting key insensitive in Ag-grid?

columnDefs = [ { headerName: 'Id', field: 'id', sort: 'asc', sortable: true, filter: true, checkboxSelection: true, resizable: true, }, { headerName: 'Name', field: 'name', sortable: true, filter: true, checkboxSelection: false, editable: true, resizable: true, }, { headerName: 'Description', field: 'description', ...

How do you remove the filter on Ag-grid?

You can deactivate the filter icon by two ways. Add enableFilter: false to you gridoptions . Add suppressFilter: true to column definition to turn off filter for this column. For more information read official ag-grid documentation.


3 Answers

the property for suppressing sorting is now

sortable: false

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

like image 87
Fede Garcia Avatar answered Nov 15 '22 09:11

Fede Garcia


colDef.suppressMenu = true
colDef.suppressSorting = true

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

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

like image 33
Chawki Messaoudi Avatar answered Nov 15 '22 09:11

Chawki Messaoudi


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

like image 40
Neeraj Jain Avatar answered Nov 15 '22 10:11

Neeraj Jain