AngularJS ui-grid data value and display value

Question

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'},

what do you mean by display value? are you using filter to convert data value to display value or something else im missing here? — hjl
– hjl, Commented Dec 28, 2014 at 16:34
@elaijuh added an example array, does that clarify it for you? :) — furier
– furier, Commented Dec 28, 2014 at 19:04
in that case, you might need to write your own sorting algorithm, checkout my answer :] — hjl
– hjl, Commented Dec 28, 2014 at 19:15

hjl · Accepted Answer · 2014-12-28 20:02:33Z

3

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'
}

answered Dec 28, 2014 at 20:02

hjl

2,8023 gold badges20 silver badges26 bronze badges

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

1 Comment

Óscar Gómez Alcañiz Over a year ago

The only problem to this solution, is it is separate from the actual data stored on the dataset... Would there be any way to use the filter supplying the information already in the cell?. In my case my data looks something like { name: 'date', data: { sort: '2015/10/02', display: '2 Oct 2015' } }, so you get the issue here... I would need something like sortingField: 'data.sort', much like DataTables behaves (in fact, I am porting my data API to use ui-grid instead). Is there anything similar that I overlooked in the docs?

hjl · Accepted Answer · 2014-12-28 19:28:47Z

1

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;
}

edited Dec 28, 2014 at 19:28

answered Dec 28, 2014 at 19:15

hjl

2,8023 gold badges20 silver badges26 bronze badges

3 Comments

furier Over a year ago

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! :)

hjl Over a year ago

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

hjl Over a year ago

in case you don't know how to achieve this by cellFilter, i write another answer for you. good luck with ng-grid 3

Collectives™ on Stack Overflow

AngularJS ui-grid data value and display value

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related