How can we display a selected column in angular.js and copy it to clipboard?
Currently I am trying to display user selected column. Also need to know how each row item of a column could be copied in this scenario:
debugger;
var app = angular.module('myApp', ['ngGrid']);
app.controller('GridExampleCtrl', function($scope, $http, $timeout) {
debugger;
$scope.myData = [];
$scope.grid1 = [{
name: "grid1a",
age: 50
}, {
name: "grid1b",
age: 43
}, {
name: "grid1c",
age: 50
}, {
name: "grid1d",
age: 29
}, {
name: "grid1e",
age: 34
}];
$scope.grid2 = [{
lastname: "grid2a",
age: 50,
state: 'Idaho'
}, {
lastname: "grid2b",
age: 43,
state: 'NewYork'
}, {
lastname: "grid2c",
age: 50,
state: 'California'
}, {
lastname: "grid2d",
age: 29,
state: 'Arizona'
}, {
lastname: "grid2e",
age: 34,
state: 'Utah'
}];
$scope.gridSels = [{
GridSelId: 1,
GridSelName: 'Grid 1'
}, {
GridSelId: 2,
GridSelName: 'Grid 2'
}]
debugger;
$scope.gridOptions = {
data: 'myData',
enableColumnResize: true,
showGroupPanel: true
//pagingOptions: $scope.pagingOptions
};
$scope.selectedCls = function(index) {
if ($scope.sortColumn === $scope.columnHeaders[index].Value) {
return $scope.sortColumn;
}
};
debugger;
$scope.display = function() {
debugger;
console.log("User selected grid : " + $scope.gridSelectedId);
if ($scope.gridSelectedId == 1) {
$scope.myData = $scope.grid1;
console.log("User selected grid : " + $scope.gridSelectedId + ", Column : " + $scope.selectedCls + " : " + " Column : " + $scope.columnHeaders[index].Value);
} else {
$scope.myData = $scope.grid2;
console.log("User selected grid : " + $scope.gridSelectedId + ", Column : " + $scope.selectedCls + " : " + " Column : " + $scope.columnHeaders[index].Value);
}
};
});
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px;
}
.green {
background-color: green;
color: white;
}
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>test</title>
<link href="Content/ng-grid.css" rel="stylesheet" />
<link href="Content/Style.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/jquery-2.1.3.js"></script>
<script src="Gridata_refqam.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/ng-grid.js"></script>
</head>
<body ng-controller="GridExampleCtrl">
<div>
Grid Selection:
<select ng-model="gridSelectedId">
<option ng-repeat="gridSel in gridSels" value="{{gridSel.GridSelId}}">{{gridSel.GridSelName}}</option>
</select>
<br />User selected: {{gridSelectedId}}
<br>
<hr>
<br />Cols: {{$scope.selectedCls}}
<br>
<hr>
<br />Cols2: {{$scope.sortColumn}}
<br>
<hr>
<div>
<button ng-click="display()">Display</button>
<hr>
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</div>
</body>
</html>
Please find my mock UI i did to get the solution , hope this helps to resolve the issue
http://plnkr.co/edit/BEz6YSkXuT4WwZQWUh5P
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Bala", age: 25},
{name: "Vinoth", age: 45},
{name: "Kumar", age: 51},
{name: "Santhosh", age: 38},
{name: "Praveen", age: 21}];
var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" >'+
'<div ng-click="copyColumn($event,col)" ng-class="\colt\ + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
'</div>';
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name', displayName: 'First Name', width: 90, headerCellTemplate: myHeaderCellTemplate },
{ field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader', headerCellTemplate: myHeaderCellTemplate} ]
};
$scope.copyColumn = function(evt,col) {
var clipBoard = '';
for(var i=0;i< $scope.myData.length; i++){
if(col.index === 0){
clipBoard = clipBoard +' '+ $scope.myData[i].name;
}
else{
clipBoard = clipBoard +' '+ $scope.myData[i].age;
}
}
alert(clipBoard);
};
});
/*style.css*/
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
.green {
background-color: green;
color: white;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
Related
I just started trying our lumX. I am trying to use the datatable from this link.
But I think the controller data is not binding. I am new to AngularJs so any help would be appreciated.
I have attached the screenshot of output.
Following is the code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>LumX</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Head -->
<link rel="stylesheet" href="bower_components/lumx/dist/lumx.css">
<link rel="stylesheet" href="bower_components/mdi/css/materialdesignicons.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }">
<div class="toolbar has-divider has-divider--dark">
<div class="toolbar__label pl">
<span>{{ vm.selectedRows.length || 0 }} selected item(s)</span>
</div>
<div class="toolbar__right">
<lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="vm.selectedRows.length === 1">
<i class="mdi mdi-pencil"></i>
</lx-button>
<lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="vm.selectedRows.length >= 1">
<i class="mdi mdi-delete"></i>
</lx-button>
</div>
</div>
<lx-data-table id="lolo" lx-selectable="true" lx-thead="vm.dataTableThead" lx-tbody="vm.dataTableTbody"></lx-data-table>
<!-- Before body closing tag -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/moment/min/moment-with-locales.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/lumx/dist/lumx.js"></script>
<script src="app.js"></script>
<script src="datatable.js"></script>
</body>
</html>
app.js
(function()
{
'use strict';
angular
.module('lumxdemo', [
'lumx',
'Controllers'
]);
angular.module('Controllers', []);
})();
datatable.js
(function()
{
'use strict';
angular
.module('Controllers')
.controller('DemoDataTableController', DemoDataTableController);
DemoDataTableController.$inject = ['$filter', '$scope'];
function DemoDataTableController($filter, $scope)
{
var vm = this;
vm.dataTableThead = [
{
name: 'dessert',
label: 'Dessert',
sortable: true
},
{
name: 'calories',
label: 'Calories',
sortable: true
},
{
name: 'fat',
label: 'Fat (g)',
sortable: true,
sort: 'asc'
},
{
name: 'comments',
label: 'Comments',
icon: 'comment-text',
sortable: false
}];
vm.advancedDataTableThead = angular.copy(vm.dataTableThead);
vm.advancedDataTableThead.unshift(
{
name: 'image',
format: function(row)
{
return '<img src="' + row.image + '" width="40" height="40" class="img-round">';
}
});
vm.dataTableTbody = [
{
id: 1,
image: '/images/placeholder/1-square.jpg',
dessert: 'Frozen yogurt',
calories: 159,
fat: 6.0,
comments: 'Lorem ipsum'
},
{
id: 2,
image: '/images/placeholder/2-square.jpg',
dessert: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
comments: 'Lorem ipsum',
lxDataTableDisabled: true
},
{
id: 3,
image: '/images/placeholder/3-square.jpg',
dessert: 'Eclair',
calories: 262,
fat: 16.0,
comments: 'Lorem ipsum'
}];
$scope.$on('lx-data-table__select', updateActions);
$scope.$on('lx-data-table__unselect', updateActions);
$scope.$on('lx-data-table__sort', updateSort);
////////////
function updateActions(_event, _selectedRows)
{
vm.selectedRows = _selectedRows;
}
function updateSort(_event, _column)
{
vm.dataTableTbody = $filter('orderBy')(vm.dataTableTbody, _column.name, _column.sort === 'desc' ? true : false);
}
}
})();
Looks like you're just missing an ng-controller in your example so the data can bind correctly.
If you add it to the <body> element for example, it should work as expected.
So change:
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }">
to:
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }" ng-controller="DemoDataTableController as vm">
This is my code
var app = angular.module('app', ['ui.grid']);
app.controller('TableCrtl', ['$scope', '$filter', function ($scope, $filter) {
var myDummyData = [{name: "Moroni",address:"one", age: 50},
{name: "Tiancum",address:"vij", age: 43},
{name: "Jacob",address:"dfr", age: 27},
{name: "Nephi",address:"mnc", age: 29},
{name: "Enos",address:"trr", age: 34}];
$scope.filterOptions = {
filterText: ''
};
$scope.gridOpts = {
data: myDummyData,
// enableFiltering: true,
columnDefs: [
{name: 'Name', field: 'name', enableFiltering: true},
{name: 'Address', field: 'address', enableFiltering: true}
]
};
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('filter')(myDummyData, $scope.searchText, undefined);
};
}]);
/* Styles go here */
.cart-item.ng-enter {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
background-color: yellow;
}
.cart-item.ng-enter-active {
background-color: white;
}
.myGrid {
width: 1200px;
height: 800px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.css" rel="stylesheet" type="text/css"/>
<script src="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js" type="text/javascript"></script>
</head>
<body ng-controller="TableCrtl">
<div>
<br>
<br>
<input type="text" class="form-control" ng-change="refreshData()" placeholder="Produkt Name" ng-model="searchText">
<br>
<div range-slider min="0" max="100" model-min="15" model-max="35"></div>
<br>
<div id="grid1" ui-grid="gridOpts" class="grid"></div>
</div>
<script src="script.js"></script>
</body>
</html>
This is my plunker :- http://plnkr.co/edit/qmVtzQLiZVZKyQCQSApT?p=preview
In the above code i have 3 columns data , but i want to display two columns in ui-grid. when i search text entire data filterd,but i want to filter display data like (name and address only) in ui-grid.i tried the following code
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('filter')(myDummyData.name, $scope.searchText, undefined);
};
May be this is what you are looking for.
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
var today = new Date();
$scope.gridOptions = {
enableFiltering: false,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
},
columnDefs: [
{ field: 'name' },
{ field: 'address' }
]
};
$scope.filter = function() {
$scope.gridApi.grid.refresh();
};
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
[ 'name', 'address'].forEach(function( field ){
if ( row.entity[field].match(matcher) ){
match = true;
}
});
if ( !match ){
row.visible = false;
}
});
return renderableRows;
};
}])
});
The code is copied from this link. The
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
}
and "$scope.singleFilter" is the main thing you need to look.
Instead of using the default filter, define a custom filter which filters based on the name and address only. Here is the basic logic.
Filter:
app.filter('customfilter', function () {
//Your logic to filter based on name and address
});
Controller:
Inject filter in the controller and use it.
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('customfilter')(arguments for filter);
};
This is my code
<!DOCTYPE html>
<html class="no-js" ng-app="test"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title></title>
<meta content="width=device-width" name="viewport">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.js"></script>
<style>
body {
padding: 60px;
min-height: 600px;
}
.grid {
width: 900px;
height: 400px;
}
.placeholder {
height: 50%;
width: 50%;
border: 3px solid black;
background: #ccc;
}
</style>
</head>
<body ng-controller="Main">
<h2>Grid</h2>
<button ng-click="export()">Export to Csv</button>
<button ng-click="exportPdf()">Export to Pdf</button>
<div class="custom-csv-link-location">
<br />
<span class="ui-grid-exporter-csv-link"> </span>
</div>
<br />
<div>
<div ui-grid="gridOptions" ui-grid-pagination ui-grid-resize-columns ui-grid-selection ui-grid-exporter ui-grid-move-columns class="grid"></div>
</div>
<button ng-click="print()">Print</button>
<!-- <div class="placeholder"> -->
<!-- </div> -->
<br>
<br>
<script>
var app = angular.module('test', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.moveColumns']);
app.controller('Main', function ($scope, $http, $filter, uiGridConstants) {
$scope.filteredData = [];
$scope.gridOptions = {};
$scope.gridOptions = {
paginationPageSizes: [10, 15, 20],
paginationPageSize: 10,
columnDefs: [
{ name: 'id', enableColumnMenu: false },
{ name: 'name', pinnedLeft: true, enableColumnMenu: false },
{ name: 'age', pinnedRight: true, enableColumnMenu: false },
{ name: 'company', enableColumnMenu: false },
{ name: 'email', enableColumnMenu: false },
{ name: 'phone', enableColumnMenu: false },
//{ name: 'about', width: 200, enableColumnMenu: false }
],
exporterPdfDefaultStyle: { fontSize: 9 },
exporterPdfTableStyle: { margin: [10, 10, 10] },
exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'red' },
exporterPdfOrientation: 'portrait',
exporterPdfPageSize: 'A3',
//exporterPdfMaxGridWidth: 1000,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
$scope.export = function () {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport('all', 'all', myElement);
};
$scope.exportPdf = function () {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.pdfExport('all', 'all', myElement);
};
});
</script>
</body>
</html>
In the above code i have 500 rows data to display with paging , but when user click print button printing total grid data by using angularjs. so please could somebody help me to resolve this,because i am new to this technology
Hint 1:
If you refer in how to print with ui-grid, the ui-grid website indicates help at Exporting Data, where you can export your data from the grid menu.
Hint 2
If you want to manage exporting to Pdf in a custom menu item, you have to define something like this:
$scope.gridOptions = {
gridMenuCustomItems = [
{
title: 'Exporting as PDF',
action: function ($event) {
var exportColumnHeaders = uiGridExporterService.getColumnHeaders(this.grid, uiGridExporterConstants.ALL);
var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var docDefinition = uiGridExporterService.prepareAsPdf(this.grid, exportColumnHeaders, exportData);
if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
uiGridExporterService.downloadPDF(this.grid.options.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).download();
}
},
order: 2
}
}
Note: You have to include reference to this at your angular controller: uiGridExporterService, uiGridExporterConstants
Hint 3
If you have any trouble printing more than 500 rows, there is a bug in the pdfmake.js library that is used by the ui-grid component. For this, you have a workaround at github. You have extra info at this github issue.
Here i have created a record using ng-grid but wat i need is when i select the selectAll checkbox the selected records should appear in the same page .when i unselect any checkbox in a record the tick mark in selectAll checkbox should not appear in the checkbox the same example which we use in our g-mail plz help me wit this
-----here is my index.html-------
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<label>
<input type="checkbox"
ng-model="allChecked"
ng-click="checkAll()" /> Select All
</label>
<span ng-model="person.check" ng-click="changeCheckAll()">
<div class="gridStyle" ng-grid="gridOptions" ></div>
</span>
<span ng-repeat="person in people | filter: {check:true}">
<div class="gridStyle" ng-grid="gridOptions1" ></div>
</span>
</body>
</html>
And here is my script...
-------script.js-------
// Code goes here
// script.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.people = [{
name: "Moroni",
age: 50,
}, {
name: "Tiancum",
age: 43,
}, {
name: "Jacob",
age: 27,
}, {
name: "Nephi",
age: 29,
}, {
name: "Enos",
age: 34,
}];
$scope.gridOptions = {
data: 'people',
columnDefs: [{field: 'check',
displayName: 'Check',
cellTemplate: '<input type="checkbox">'
}, {
field: 'age',
displayName: 'Age'
}, {
field: 'name',
displayName: 'Name'
}]
};
$scope.gridOptions1 = {
data: 'people',
columnDefs: [ {
field: 'age',
displayName: 'Age'
}, {
field: 'name',
displayName: 'Name'
}]
};
$scope.checkAll = function() {
for(var i=0; i < $scope.people.length; i++) {
$scope.people[i].check = $scope.allChecked;
}
};
$scope.changeCheckAll = function() {
for(var i = 0; i < $scope.people.length; i++) {
if (!$scope.people[i].check) {
$scope.allChecked = false;
return false;
}
}
$scope.allChecked = true;
};
});
here is my plnkr:http://plnkr.co/edit/ubatnOV83gz1sF3zaVTf?p=preview
Use showSelectionCheckbox to set grid options. Here is the link
http://angular-ui.github.io/ui-grid/
I'm using ng-grid to create a data table and apply color to cells based on their numerical value. I also need to display those numbers as percentages. I've been able to apply a filter to output the numbers as percents, but doing so wipes out the coloring based on numerical value. How can I get both to work together?
http://plnkr.co/edit/S2oYiwZex7dNw1AQAB9j?p=preview`
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{
space: "S",
week1: 0,
week2: 9,
week3: 1
}, {
space: "E",
week1: 0,
week2: 0,
week3: 0
}, {
space: "B",
week1: 4,
week2: 11,
week3: 16
}, {
space: "C",
week1: 0,
week2: 0,
week3: 0
}, {
space: "S",
week1: 0,
week2: 0,
week3: 0
}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'space',
displayName: ''
}, {
field: 'week1',
displayName: '12/30',
cellTemplate: '<div ng-bind="row.getProperty(col.field) | percentage:100"><div ng-class="{first: row.getProperty(col.field) <= 5}"><div ng-class="{second: row.getProperty(col.field) >= 5}"><div ng-class="{third: row.getProperty(col.field) >= 10}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div></div></div></div>'
}, {
field: 'week2',
displayName: '1/6',
cellTemplate: '<div ng-bind="row.getProperty(col.field) | percentage:100"><div ng-class="{first: row.getProperty(col.field) <= 5}"><div ng-class="{second: row.getProperty(col.field) >= 5}"><div ng-class="{third: row.getProperty(col.field) >= 10}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div></div></div>'
}, {
field: 'week3',
displayName: '1/13',
cellTemplate: '<div ng-bind="row.getProperty(col.field) | percentage:100"><div ng-class="{first: row.getProperty(col.field) <= 5}"><div ng-class="{second: row.getProperty(col.field) >= 5}"><div ng-class="{third: row.getProperty(col.field) >= 10}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div></div></div>'
},
]
};
});
app.filter('percentage', function() {
return function(input, max) {
if (isNaN(input)) {
return input;
}
return Math.floor((input * 100) / max) + '%';
};
});
/*style.css*/
.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 400px;
height: 300px
}
.first {
background-color: #fff9f8;
color: black;
}
.second {
background-color: #ffeeeb;
color: black;
}
.third {
background-color: #ffded8;
color: black;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
`
You should apply the filter on the cellText, what you want is to format the output of the col field and print it as a percentage
<div class="ngCellText">{{row.getProperty(col.field) | percentage:100}}</div>
cf: http://plnkr.co/edit/wiKRgGK8QtNyTyrjpgg8?p=preview
AFAIK, filters create 2-way binding, and in case you do not need that, you can define a cell template as such:
let percentageCellTemplate = '<div class="ngCellText">{{grid.appScope.Math.round(row.entity[col.field])}}%</div>'
and then use it:
columnDefs : [
{ field : 'continuedRate', displayName : 'continuedRate (%)', type: 'number', cellTemplate: percentageCellTemplate}
]
Note: we wrap ui-grid with our code and set Math on our scope, so ui-grid lets us get our own scope by accessing grid.appScope