current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am looking at using the AngularUI team's new table / grid implementation ui-grid. It looks really great, promising and easy to use.

Tho I have a question / problem I can't find the answer to in the documentation.

I want a column to sort on a different value then the one displayed, how can I achieve that?

I have a rank property ranging from 1 to 10 which I want to sort on but I have a rank_name property I want to be displayed.

The rank property would be the data value and the rank_name would be the display value for the column.

var members = [
    {
        name: 'Member 1',
        rank: 1,
        rank_name: 'Grand Admiral'
    },
    {
        name: 'Member 2',
        rank: 2,
        rank_name: 'Aspirant'
    }
]

Take the following list of members as an example, the rank property should not be its own column but be hidden, the rank_name should be visible as its own column.

But if you try and sort members from highest rank to lowest rank it would sort it alphabetically and not by the rank number which is the real rank indicator. Thus placing the Aspirant at the top and not the Grand Admiral.

$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    columnDefs: [
        {field: 'name'},
        {field: 'coords'},
        {field: 'rank_name', name: 'rank'},
        {field: 'score'},
        {field: 'strength'},
        {field: 'level'},
        {field: 'outposts'},
        {field: 'public_note'}
    ],
    data: members
};

Here is the grid options i currently use, but would like to add a sort value for the column definition for rank.

{display_field: 'rank_name', name: 'rank', value_field: 'rank'},
share|improve this question
    
what do you mean by display value? are you using filter to convert data value to display value or something else im missing here? –  elaijuh Dec 28 '14 at 16:34
    
@elaijuh added an example array, does that clarify it for you? :) –  furier Dec 28 '14 at 19:04
    
in that case, you might need to write your own sorting algorithm, checkout my answer :] –  elaijuh Dec 28 '14 at 19:15

2 Answers 2

up vote 1 down vote accepted

add below to rank_name columnDef

sort: {
    direction: uiGridConstants.ASC
},
sortingAlgorithm: function(a, b) {
    var rank = {
        'Grand Admiral': 1,
        'Aspirant': 2
    };

    if (rank[a] > rank[b]) {
        return 1;
    }

    if (rank[a] < rank[b]) {
        return -1;
    }

    return 0;
}
share|improve this answer
    
That seems like an excellent way to solve my problem, tho I think a simpler way should be implemented by the angular ui team in the future, thanks for the help! :) –  furier Dec 28 '14 at 19:29
    
actually in data you only need rank field (with number value), you don't need rank_name. just write a cellFilter to show string value in viewport but still sorting on number value. the pros of this is space saving for raw data –  elaijuh Dec 28 '14 at 19:44
    
in case you don't know how to achieve this by cellFilter, i write another answer for you. good luck with ng-grid 3 –  elaijuh Dec 28 '14 at 20:03
up vote 1 down vote

write rankToString filter in your angular module

module.filter('rankToString', function () {
    return function(input) {
        switch(input) {
        case 1:
            return 'Grand Admiral';
        case 2:
            return 'Aspirant';
        }
    };
}

columnDef for rank, you still sort on rank number but show the string value in viewport. so you can dump rank_name filed.

{
    field: 'rank',
    sort: {
        direction: uiGridConstants.ASC
    },
    cellFilter: 'rankToString'
}
share|improve this answer
    
Thanks thats also a good suggestion :) –  furier Dec 28 '14 at 20:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.