Display Custom Boolean Value in Angular ui-grid

Question

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?

CMR · Accepted Answer · 2015-11-13 14:54:28Z

4

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

answered Nov 13, 2015 at 14:54

CMR

9331 gold badge7 silver badges8 bronze badges

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

1 Comment

Karthik RP Over a year ago

Will try with my app and check if it works. Hope it won't mess up the row edit functionality.

Community · Accepted Answer · 2017-05-23 12:26:07Z

2

@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.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jul 15, 2016 at 17:02

Gary

3,3132 gold badges30 silver badges31 bronze badges

Comments

jedi · Accepted Answer · 2016-10-12 09:33:36Z

0

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

answered Oct 12, 2016 at 9:33

jedi

85912 silver badges33 bronze badges

Collectives™ on Stack Overflow

Display Custom Boolean Value in Angular ui-grid

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related