CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
Karthik RP
Karthik RP

Reputation: 1078

Display Custom Boolean Value in Angular ui-grid

Ok, I'm new to angular and angular ui-grid. I'm using angularjs(v1.4) with angular-ui-grid(v3.0.7).

I have defined a grid as below

seec.gridOptions = {};
  seec.gridOptions.rowEditWaitInterval = -1;
  seec.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
    gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
  };

seec.gridOptions.columnDefs = [
    {name: 'pouch', displayName: 'Pouch', enableCellEdit: false, enableHiding: false, width: 250},
    {name: 'content', displayName: 'Content', enableHiding: false, width: 150},
    {
      name: 'units',
      displayName: 'Number of Items',
      type: 'number',
      enableHiding: false,
      width: 150
    },
    {name: 'active', displayName: 'Status', type: 'boolean', enableHiding: false, width: 150}
  ];

The controller basically makes a http call and feeds data to the grid.

if (response.status === 200) {
    seec.gridOptions.data = angular.copy(seec.data);
}

Currently, the last item in the grid is being displayed as either 'true' or 'false' based on the boolean field value., and when I double click on the field a checkbox appears.

So, I need to display true as 'active' and false as 'inactive'. Is there any way of doing this with angular ui-grid?

Upvotes: 2

Views: 4877

Answers (3)

jedi
jedi

Reputation: 859

You can use angular filter specifying in your columnDef for a column cellFilters : 'yourfiltername:args'.

args can be a variable or a value, in that case pay attention to use right quoting. if args is a string cellFilters : 'yourfiltername:"active"'

Your filter can be directly a function or a filter name. Here a plunkr

Upvotes: 0

Gary
Gary

Reputation: 3324

@CMR thanks for including the Plunkr. As I was looking at it I checked, and in this case it seems overkill to have the mapValue function.

This worked for me:

cellTemplate: "<div class='ui-grid-cell-contents'>{{row.entity.active ? 'active' : 'inactive'}}</div>"

(I added the class in there to match the other cells). I will say that this still smells a little hacky to me.

This question leads to using a function as the field itself: In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?

I'd still like to see an answer with the logic directly in the columnDefs.

Upvotes: 2

CMR
CMR

Reputation: 933

There certainly is! One approach could be to use a cellTemplate and map your rowvalues to something different.

I created a Plunkr showcasing a possible setup.

There are two steps to take. First add a cellTemplate to your column:

cellTemplate: "<div ng-bind='grid.appScope.mapValue(row)'></div>"

Note: Instead of ng-bind you could also use "<div>{{grid.appScope.mapValue(row)}}</div>", if you are more familiar with that.

Second step is to define your mapping function, for example:

appScopeProvider: {
  mapValue: function(row) {
    // console.log(row);
    return row.entity.active ? 'active' : 'inactive';
  },
}

Upvotes: 4

Related Questions