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
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
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.
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.
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', ...
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.
the property for suppressing sorting is now
sortable: false
https://www.ag-grid.com/javascript-grid-sorting/
colDef.suppressMenu = true
colDef.suppressSorting = true
http://www.angulargrid.com/angular-grid-column-definitions/index.php
Exemple: http://jsfiddle.net/7ony74h5/1/
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....
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With