Hello,
We are currently migrating our product from an old grid component to the last igGrid component bind to an ODataSource. I would like to know if it's possible to achieve the same sorting feature that we had before:
for exmple I have a grid with 5 columns like below:
| Id | FirstName | LastName | Age | Town |
If I click on LastName then FirstName the sort order with the igGrid is the click order:
LastName, FirstName.
I would like to keep the sort order of my old grid that was from the column position (left to right):
FirstName,LastName.
Is there a way to do so ?
Thanks.
Btw: I forgot I am using grouping too that should be first in the $orderby of the OData request.
Hello Vincent,
What I can suggest in order achieve the required behavior is to handle columnSorting event, check whether a particular condition is met (for example is both First Name and Last Name columns exist in filtering expressions collection) and then modify the sorting expressions of the data source so that "First Name" expression is before "last Name" expression. Afterwards, using the sortMultiple method you can apply the new expressions and cancel the default sorting.
{ name: "Sorting", mode: "multi", columnSorting: function (evt, ui) { if (ui.newExpressions.filter(e => e.fieldName === 'FirstName').length > 0 && ui.newExpressions.filter(e => e.fieldName === 'LastName').length) { const newExpressions = [ { fieldName: "FirstName", isSorting: true, dir: "asc", compareFunc: null, layout: null }, { fieldName: "LastName", isSorting: true, dir: "asc", compareFunc: null, layout: null } ]; ui.owner.grid.dataSource.settings.sorting.expressions = newExpressions; ui.owner.sortMultiple(); return false; }
Please let me knw if you need any further assistance.
8371.igGridSortMultipleColumnInOrder.zip
Hello Vasya,
thank you for your answer indeed it's working (I did that too ^^). I was not sure it was the right way to do so, I managed to keep the grouping first and then to apply the sort on the non grouped columns from left to right here is the function I use if it helps anyone:
let grp = <Array<any>>jQuery('#' + ui.owner.grid.id()).igGridGroupBy("groupByColumns"); ui.newExpressions.sort((n1, n2) => { if (n1.isGroupBy && !n2.isGroupBy) { return -1 } else if (!n1.isGroupBy && n2.isGroupBy) { return 1 } else if (n1.isGroupBy && n2.isGroupBy) { return grp.findIndex((element) => element.key === n1.fieldName) - grp.findIndex((element) => element.key === n2.fieldName) } return ui.owner.grid.getVisibleIndexByKey(n1.fieldName) - ui.owner.grid.getVisibleIndexByKey(n2.fieldName) });
thanks you
Thank you for taking time to share your workaround. I believe other community members will benefit from it if they have similar scenario.Please let me know if I could be of any further assistance.