AngularJs ng-grid multiple fields in a single cell column

In AngularJs ng-grid, we can achieve the multiple fields in a single cell or column using cell Template.

The Table of Content 

 1. Multiple fields cell Template. 
 2. Full example code-sample for ng-grid.

Multiple fields cell Template

?

1 2	var cellTemplate: '<div class="ngCellHeight">50% : {{row.entity.C50Percent}} <br/> 60% : {{row.entity.C60Percent}}<br/> 70% : {{row.entity.C70Percent}}</div>'

var cellTemplate: '<div class="ngCellHeight">50% : {{row.entity.C50Percent}} <br/> 60% : {{row.entity.C60Percent}}<br/> 70% : {{row.entity.C70Percent}}</div>'
           

Full example code-sample for ng-grid

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

var baseURL = "http://localhost:56110/"; var app = angular.module('mobileApp', ['ngGrid']); app.service('getMobileService', function ($http) {     this.getMobiles = function () {         return $http({             method: 'GET',             url: baseURL + 'Api/MobilePref/Get/1'         });            } }); app.controller('getMobileServiceCtrl', function ($scope, getMobileService) {     $scope.mobiles = null;     getMobileService.getMobiles().then(function (resp) {         $scope.mobiles = resp.data;     });     $scope.mobileColumns = [             { field: 'Account', displayName: 'Account'},             { field: 'AlertToMobile', displayName: 'AlertToMobile'},             {                 field: 'C50Percent', displayName: 'Alert Percent',                 cellTemplate: '<div class="ngCellHeight">50% : {{row.entity.C50Percent}} <br/> 60% : {{row.entity.C60Percent}}<br/> 70% : {{row.entity.C70Percent}}</div>'             },             { field: 'LastUpdateBy', displayName: 'LastUpdateBy' },             { field: 'LastUpdateDate', displayName: 'Last Update', cellFilter: "date:'yyyy-MM-dd'", width: "9%" },            ];     $scope.mobileGridView = {         data: 'mobiles',         columnDefs: 'mobileColumns',         enableCellSelection: true,         enableRowSelection: true     }; });

var baseURL = "http://localhost:56110/";

var app = angular.module('mobileApp', ['ngGrid']);

app.service('getMobileService', function ($http) {
    this.getMobiles = function () {
        return $http({
            method: 'GET',
            url: baseURL + 'Api/MobilePref/Get/1'
        });        
    }
});

app.controller('getMobileServiceCtrl', function ($scope, getMobileService) {
    $scope.mobiles = null;

    getMobileService.getMobiles().then(function (resp) {
        $scope.mobiles = resp.data;
    });

    $scope.mobileColumns = [
            { field: 'Account', displayName: 'Account'},
            { field: 'AlertToMobile', displayName: 'AlertToMobile'},
            {
                field: 'C50Percent', displayName: 'Alert Percent',
                cellTemplate: '<div class="ngCellHeight">50% : {{row.entity.C50Percent}} <br/> 60% : {{row.entity.C60Percent}}<br/> 70% : {{row.entity.C70Percent}}</div>'
            },
            { field: 'LastUpdateBy', displayName: 'LastUpdateBy' },
            { field: 'LastUpdateDate', displayName: 'Last Update', cellFilter: "date:'yyyy-MM-dd'", width: "9%" },
           ];

    $scope.mobileGridView = {
        data: 'mobiles',
        columnDefs: 'mobileColumns',
        enableCellSelection: true,
        enableRowSelection: true
    };

});