Karthik RP Karthik RP - 3 months ago 37x
AngularJS Question

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?


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