Format bit flag to text value in ng-grid

0
votes

I am using ng-grid and want to display "active/inactive" instead of 0/1 based on the bit flag in the table.

Edited to add:

The grid has columns like EmployeeName, EmployeeRole, etc. For the Status column, I want to display the status as Active/Inactive. The value for this is filed in the table is 0/1. How do I transform the data, should I use cell template?

`$scope.cols = [ { field: 'EmployeeName', displayName: 'Name', }, { field: 'Role', displayName: 'Role' },
{field: 'Status', displayName: 'Status'} ];'

Thanks for any help!

3
angularjsng-grid
Yeah, that was short, I guess the best way would be to add another property to your object that returns the desired values according to the bit propertie, or prepare a function to do it. Show us some code, please. – Fedaykin

3 Answers

0
votes

You can use a custom cell template for that field and express the value with a $scope function.

plunker example

I've used a plunker from ngGrid's site to build from since it had the cellTemplate already set up. Instead of ageOver30IsActive, you'd change that to probably something like getStatusString which would return active or inactive based on the status bit.

0
votes

I prefer to use cellFilter in this situation. Using cellTemplate unnecessarily complicates things. You can create a custom filter that is reusable throughout your application and then apply it with cellFilter. This way you can use the same filter on any other pages that need to display the value in human readable format.

See plunker here

0
votes

In this case we can create a custom filter and inject it to the main module. This filter can reuse from other place of application.

First create a filter module

angular.module('tmb.filter', []) //tmb is the main module
    .filter('statusFilter', function () {

        return function (type) {
            return type ? 'Active' : 'In-Active';
        };
    });

Then inject it to the main module

var app = angular.module("tmb", ['ngRoute', 'ngGrid', 'tmb.services', 'tmb.filter']);

Now use it to the ng-grid column 

$scope.ConfigItemGrid = {
            data: 'ConfigItemList',
            primaryKey: 'ItemID',
            multiSelect: false,
            selectedItems: $scope.selectedUsers,
            enableColumnResize: false,
            showFooter: true,
            footerRowHeight: 35,
            enableCellEdit: false,
            columnDefs: [
                { field: 'ItemDescription', displayName: 'Item Description', width: '25%', sortable: false },
                { field: 'IsPO', displayName: 'Is PO', width: '15%', sortable: false },
                { field: 'Status', displayName: 'Po Status', width: '15%', sortable: false, cellFilter: 'statusFilter' },
                { field: 'ItemType', displayName: 'Item Type', width: '25%', sortable: false },
                { filed: '', cellTemplate: '<button ng-click="edit(row, primaryKey)">Edit</button> <button ng-click="delete(row)">Delete</button>', width: '15%' }
            ]
        };

enter image description here