Sorting of uI grid column containing Angular filter

Question

I have recently started using Angular ui-grid. I am not very well versed with the internals of the library.

I had a ui-grid column that required to display percentages. SO I added the following filter to my app and used it along with ui-grid cellFilter property.

module.filter('percentage', function () {
    return function (input) {
        if (!input) {
            return '';
        } else {
            return input + '%';
        }
    };
})

This worked fine, but while sorting this column. The sorting works unexpectedly. Suppose if I have 3 rows with values 100,200,300. I expect it can have only two sorted states 100,200,300 and 300,200,100. But if I keep clicking the header of this column I get a third state as 200, 300, 100 or as 100, 300,200. I am even not sure what the pattern is for this state.

If I am right, The angular filter works only on the views and do not impact model of the field. So I do not think adding filter can have an impact on sorting.

Apart from that the two expected sorting (ASCENDING, DESCENDING) appears perfectly, the only problem being the appearance of third. How do I resolve this issue.

Am I missing any implementation ?? Kindly help me resolve this.

Edit: This issue occurs for string column as well. In my understanding there can only be one ASCENDING and one DESCENDING state as far as sorting is considered. But I get more arrangements.

when using sorting from ui-grid you have a third state - default order- which is data displayed in the order in which it has been loaded. This can be seen for their example also ui-grid.info/docs/#/tutorial/102_sorting — rave
– rave, Commented Oct 5, 2016 at 7:57
Thanks@rave Is there a way that if once sorted the rows thereafter should toggle only between ASCENDING and DESCENDING orders avoiding the default order. — Saurabh Tiwari
– Saurabh Tiwari, Commented Oct 5, 2016 at 10:18

Vikash B · Accepted Answer · 2016-10-05 09:41:53Z

1

You can use sortDirectionCycle to remove the third state of sorting.

columnDefs: [
   { field: 'name', sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
   { field: 'gender', sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
   { field: 'company', enableSorting: false }
]

From document, When clicking on a column heading the sort direction will cycle to ascending, then descending, then back to unsorted. You may rearrange this cycle or skip part of it by setting the sortDirectionCycle columnDef option. For more details check this link sortDirectionCycle

answered Oct 5, 2016 at 9:41

Vikash B

1,00513 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sorting of uI grid column containing Angular filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related