CODEWITHSUNDEEP
angularjsangular-ui-grid
Haji
Haji

Reputation: 1775

UI Grid - Formatting Data

I'm using the new Angular UI Grid (that is planned to replace ng-grid). My data needs some formatting before it's displayed in the table. For instance, my server returns an attribute named "status" as a number, but I want to display it as a nice name.

If status=1 display "Todo", if status=2 display "Doing" etc.

How can this be done in UI Grid?

Upvotes: 1

Views: 5319

Answers (3)

Daniel Pham
Daniel Pham

Reputation: 146

The shortest way is use CellTemplate with appScopeProvider:

  vm.gridOptions = {
        columnDefs: [
            {
                field: 'status',
                cellTemplate: '<div>{{grid.appScope.formatStatus(row)}</div>'
            }
        ],
        appScopeProvider: {
            formatStatus: function (row) {
                return row.entity.status === 1 ? 'Todo' : 'Doing';
            },
        }
    }

Upvotes: 1

PaulL
PaulL

Reputation: 6650

The preferred method now is to use a cellFilter, rather than a custom template. Custom templates are OK, but they impose more workload on upgrade - you have to check whether new features require modifications to your template.

There is a reasonable example of filters in the tutorials: http://ui-grid.info/docs/#/tutorial/201_editable

Note the cellFilter: 'mapGender' on the gender column, and the filter itself defined further below in the tutorial:

.filter('mapGender', function() {
  var genderHash = {
    1: 'male',
    2: 'female'
  };

  return function(input) {
    if (!input){
      return '';
    } else {
      return genderHash[input];
    }
  };
})

Upvotes: 5

nabinca
nabinca

Reputation: 2022

First step, add a cellTemplate to the column:

$scope.gridOptions.columnDefs = [
    {field:'status', displayName: 'Status',cellTemplate: 'statusTemplate.html'}
];

The Template-File should look like this (COL_FIELD is the actual field):

<div style="text-align: center">{{COL_FIELD==1 ? 'Todo' : 'Doing'"}}</div>

Hope, you got the idea! :)

Upvotes: 2

Related Questions