AngularJs ng-grid multiple fields in a single cell column

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

});
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.