newRawData.forEach is not a function in ui-grid - angularjs

I search for this error but not able to fix it.Am new to angular.Dont know exactly whats going wrong.
Html:
<div class="row gridContainer" ng-controller="tripsGridController">
<div ui-i18n="{{::selectedLanguageName}}">
<div ui-grid="gridOptionsTrips" ui-grid-selection ui-grid-resize-columns ui-grid-move-columns ></div>
</div>
</div>
Angular code:
$scope.gridOptionsTrips = {};
$scope.gridDataSourceTrips = [];
var ROW_HEIGHT = 30;
// to show data on Grid
$scope.gridOptionsTrips = {
enableRowSelection: true,
enableRowHeaderSelection: true,
enableSorting: true,
multiSelect: false,
rowHeight: ROW_HEIGHT,
virtualizationThreshold: 10,
fastWatch: false,
enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
data: 'gridDataSourceTrips',
appScopeProvider: $scope,
showColumnMenu: true,
enableSelectAll: false,
noUnselect: true,
enableCellSelection: true,
rowTemplate: '<div ng-click=\"grid.appScope.onTripsGridRowClick(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" class=\"ui-grid-cell\" ng-class=\"{ \'ui-grid-row-header-cell\': col.isRowHeader }\" ui-grid-cell></div>'
};
$scope.onTripsGridRowClick = function (row) {
$scope.gridApi.selection.selectRow(row.entity);
};
$scope.gridColDefsTrips = function () {
var idTemplate = '<div></div>';
var sTemplate = '<div></div>';
var speedTemplate = '<div></div>';
var directionTemplate = '<div></div>';
var timeTemplate = '<div></div>';
var kmCounterTemplate = '<div></div>';
var driverNameTemplate = '<div></div>';
return [
{ name: "CARDRIVER", displayName: "CARDRIVER", field: 'UserId', cellTemplate: idTemplate, enableColumnMenu: false, headerCellFilter: 'translate', width: 150, showInColumnFilter: true },
{ name: 'STARTEND', displayName: 'STARTEND', field: 'Departure.DateTime', cellTemplate: idTemplate, width: 70, enableColumnMenu: false, headerCellFilter: 'translate', showInColumnFilter: true },
{ name: 'STARTEND', displayName: 'STARTEND', field: 'Destination.DateTime',cellTemplate: idTemplate, enableColumnMenu: false, headerCellFilter: 'translate', width: 80, showInColumnFilter: true },
{ name: 'TRIPLENGTH', displayName: 'TRIPLENGTH', field: 'Distance', cellTemplate: idTemplate, enableColumnMenu: false, headerCellFilter: 'translate', width: 150, showInColumnFilter: true }
];
};
$scope.gridDataSourceTrips = tripsDetailsService.GetAllTripsByWeek('2014-01-10', '2014-01-14', 1, 20);
$scope.gridOptionsTrips.columnDefs = $scope.gridColDefsTrips();

Related

AngularJs, display function result in ui-grid

I am trying to sum two columns in a function then display their result in the ui grid. any ideas about how to do this, then save the ui grid content in the database?
see the picture
so in my case : a and b are binded from the database, while I want angularjs to calculate their sum and add it in the column "Quantite reelle".
this is my grid code $scope.gridOptions = {
showGridFooter: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.core.on.renderingComplete($scope, function () {
$timeout(function () {
var gridBodyElem = document.getElementById(gridApi.grid.id + '-grid-container');
gridApi.grid.element.on('mouseup', handleGridClick);
});
});
}
};
$scope.gridOptions.columnDefs = [
{ name: 'Num', enableHiding: false, enableColumnMenu: false, enableCellEdit: false, width: '5%' },
{ name: 'CodeArticle', enableHiding: false, enableColumnMenu: false, displayName: 'Code Article ', width: '10%' },
{ name: 'Ref', enableHiding: false, enableColumnMenu: false, displayName: 'Référence ', width: '10%' },
{ name: 'Designation', enableHiding: false, enableColumnMenu: false, displayName: 'Désignation ', width: '30%' },
{ name: 'Stock', enableHiding: false, enableColumnMenu: false, displayName: "Qté théorique (a)", width: '13%' },
{ name: "ajust", enableHiding: false, enableColumnMenu: false, displayName: "Ajustement (b)", width: '12%' },
{ name: "sum", enableHiding: false, enableColumnMenu: false, displayName: "Quantité Réelle(a+b)", width: '14%' },
{ name: "motif", enableHiding: false, enableColumnMenu: false, displayName: "Motif", width: '20%' }
];
`
thank you guys.
You need to set column field property to expression.
$scope.gridOptions.columnDefs = [
{ name: "sum", enableHiding: false, enableColumnMenu: false, field:'CalculateSum(a,b)', displayName: "Quantité Réelle(a+b)", width: '14%' }
];
Here a & b are respective column names.
You can try this:
$scope.gridApi.grid.columns[column a].getAggregationValue() +
$scope.gridApi.grid.columns[column b].getAggregationValue()
$scope.gridOptions.columnDefs = [
{ name: 'Num', enableHiding: false, enableColumnMenu: false, enableCellEdit: false, width: '5%' },
{ name: 'CodeArticle', enableHiding: false,field:'CodeArticle', enableColumnMenu: false, displayName: 'Code Article ', width: '10%' },
{ name: 'Ref', enableHiding: false,enableColumnMenu: false, displayName: 'Référence ', width: '10%' },
{ name: 'Designation', enableHiding: false, enableColumnMenu: false, displayName: 'Désignation ', width: '30%' },
{ name: 'Stock', enableHiding: false,field:'Stock', enableColumnMenu: false, displayName: "Qté théorique (a)", width: '13%' },
{ name: "ajust", enableHiding: false, field: 'ajust', enableColumnMenu: false, displayName: "Ajustement (b)", width: '12%' },
{ name: "sum", enableHiding: false, enableColumnMenu: false, field: 'CalculateSum(ajust,Stock)', displayName: "Quantité Réelle(a+b)", width: '14%' },
{ name: "motif", enableHiding: false, enableColumnMenu: false, displayName: "Motif", width: '20%' }
];
$scope.CalculateSum = function (ajust, Stock) {
return ajust + Stock;
};
Following Tutorial: 323 More Binding examples I created a Plunker, using a filter calculateSum to calculate the sum of both fields.
angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid'])
.controller('MainCtrl', MainCtrl)
.filter('calculateSum', function () {
return function (input, a, b) {
return input[a]+input[b];
};
});;
MainCtrl.$inject = ['$http', 'uiGridConstants'];
function MainCtrl($http, uiGridConstants) {
var vm = this;
vm.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
vm.gridApi = gridApi;
},
columnDefs: [
{ field: 'name'},
{ field: 'num1'},
{ field: 'num2'},
{ name: 'sum', field: uiGridConstants.ENTITY_BINDING, cellFilter: 'calculateSum:"num1":"num2"' }
]
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.then(function(response) {
response.data.forEach(function(row){
row.num1 = row.age;
row.num2 = row.age*2;
});
vm.gridOptions.data = response.data;
});
}

using expandable Angular js ui grid

I am using Expandable UI Grid.
My data is shown in grid which is expanded on click and grid is refreshed every 5 secs.
If I expand a row then it is collapsed every 5 seconds as the grid refreshes.
How can I maintain the row expansion when the grid refreshes?
Code
$scope.fillProductList = function () {
$http({
method: 'GET',
url: getJobs,
data: {}
}).success(function (result) {
$scope.showSubListGrid = false;
$scope.myData = '';
var gridDataWithDownload = result;
//grid data
$scope.myData = gridDataWithDownload;
$scope.gridOptionsCategory.data = gridDataWithDownload;
// $scope.refresh = false;
timer = $timeout(function () {
$scope.fillProductList();
}, timeOutStamp);
}).error(function (result) {
timer = $timeout(function () {
$scope.fillProductList();
}, timeOutStamp);
});
};
$scope.gridOptionsCategory = {
useExternalPagination: true,
expandableRowHeight: 300,
enableSorting: true,
data: $scope.myData,
enableColumnResizing: true,
enableGridMenu: false,
expandableRowTemplate: 'griddata.html',
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
// gridApi.expandable.toggleRowExpansion($scope.gridApi.grid.row[0].entity);
gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
$scope.gridApi.grid.modifyRows($scope.gridOptionsCategory.data);
$scope.gridApi.selection.selectRow($scope.gridOptionsCategory
.data[0]);
//$scope.gridOptionsCategory.expandableRowHeight = 500;
//$timeout.cancel(timer);
if (row.isExpanded) {
row.entity.components = JSON.parse(row.entity.components)
this.scope.gridOptionsCategory.expandableRowScope = row.entity;
// $scope.GridOptions.expandableRowScope = row.entity.components;
}
if (!row.isExpanded) {
timer = $timeout(function () {
$scope.fillProductList();
}, timeOutStamp);
}
});
},
enableHorizontalScrollbar: 0,
//enableVerticalScrollbar:0,
//useExternalSorting: true,
columnDefs: [{
field: 'filtertoggle',
displayName: '',
visible: true,
headerCellTemplate: '' +
'<button id=\'toggleFiltering\' style= "padding:3px 7px;" ng-click="grid.appScope.toggleFiltering()" class="btn btn-warning glyphicon glyphicon-filter">' +
'</button>'
},
{
name: 'Job Name',
field: 'name',
width: '20%',
enableCellEdit: false,
enableHiding: true,
enableGrouping: false,
// enableFiltering: true,
filter: {
term: $scope.filterOptions.filterText
}
},
{
name: 'Profile',
field: 'profile',
width: '15%',
enableCellEdit: false,
enableHiding: true,
enableGrouping: false
}, {
name: 'Progress',
field: 'progress',
enableSorting: true,
width: '18%',
enableCellEdit: false,
enableHiding: true,
enableGrouping: false,
// enableFiltering: true,
cellTemplate: statusTemplate
}
]
};
gridApi.core.on.rowsRendered(scope,() => {
if (!gridApi.grid.expandable.expandedAll && !initialized)
{ gridApi.expandable.expandAllRows();
initialized = true;
}
});
Can you check with these code. You might get some idea.

ui-grid Data display issue

I'm using ui-grid with my Cordova application. When I try to populate the ui-grid, sometimes data is displayed on the left like in the picture below:
Any help?
HTML
<div ui-grid="{data: gridOptions, columnDefs: gridColumns, paginationPageSize: 10, enableColumnMenus: false, enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0}" ui-grid-auto-resize ui-grid-pagination class="grid_transmiss"> </div>
JS
$scope.gridColumns = [{
field: 'ref',
displayName: 'Référence'
}, {
field: 'Emq',
displayName: 'Nombre de plots empilés'
}, {
field: 'charge',
displayName: 'Charge nominale (daN)'
}, {
field: 'fp',
displayName: 'Fréquence propre(Hz)'
}, {
field: 'attenuation',
displayName: 'Atténuation(%)'
}, {
field: 'flechereel',
displayName: 'Flèche réelle statique (mm)'
}, {
name: 'Courbe',
displayName: 'Courbe',
cellTemplate: '<i ng-click="grid.appScope.goToChart()"><img src="img/chart.png" style="width=20px;height:20px" alt="Voir courbe" /></i>'
}];
Try defining your grid in your controller like this:
$scope.gridOptions = {
columnDefs: [
{
field: 'ref', displayName: 'Référence', width: "*"
},
{
field: 'Emq', displayName: 'Nombre de plots empilés', width: "*"
},
{
field: 'charge', width: 110, displayName: 'Charge nominale (daN)'
},
{ field: 'fp', displayName: 'Fréquence propre(Hz)', width: "*"
},
{
field: 'attenuation', displayName: 'Atténuation(%)', width: "*"
},
{
field: 'flechereel', displayName: 'Flèche réelle statique (mm', width: "*"
},
{
field: 'Courbe', displayName: 'Release Courbe', width: "*",
cellTemplate: '<i ng-click="grid.appScope.goToChart()"><img src="img/chart.png" style="width=20px;height:20px" alt="Voir courbe" /></i>'
},
],
showGridFooter: true,
enableFiltering: true,
enableSorting: false,
enableColumnMenus: false,
paginationPageSizes: [100, 120, 140],
paginationPageSize: 100,
enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
enableGridMenu: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
Then in your HTML:
<div ui-grid="gridOptions" class="grid" ui-grid-pagination ui-grid-exporter ui-grid-auto-resize></div>
Also, make sure you include 'uiGridConstants' in our controller definition like so:
ContractorCtrl.$inject = ['$scope', '$interval', '$window', '$filter', 'uiGridConstants', '$q', '$timeout'];
function ContractorCtrl($scope, $interval, $window, $filter, uiGridConstants, $q, $timeout)
Let me know if this solves your issue.
change your column definition according to below format. It will work.
$scope.gridOptions = {
columnDefs: [
{name:'clumnName', fields: 'DisplayValue', width: '20%'},
{name:'clumnName', fields: 'DisplayValue', width: '20%'},
{name:'clumnName', fields: 'DisplayValue', width: '20%'},
],
data: $scope.DisplayDataSet,
}

How to add confirm box for ui-grid check box?

How to add confirm box for ui-grid check box ?
The defaultYn value, tried to add a confirm message before making a server call.
vm.gridOptions1 = {
enableColumnResizing: true,
enableAutoResizing: false,
enableHorizontalScrollbar : 1,
enableRowSelection: true,
enableRowHeaderSelection: false,
appScopeProvider: vm.myAppScopeProvider,
// rowTemplate: "<div ng-dblclick=\"grid.appScope.openOtherPavacce(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>",
columnDefs: [
{field: 'jobVaccinationPK.screeningTypeMast.screeningType', displayName: 'Screening type',type: 'text',width: '27%', enableCellEdit: false},
{field: 'jobVaccinationPK.jobCategoryTypeMast.jobCategoryName', displayName: 'Job Category',width: '27%', enableCellEdit: false},
{field: 'jobVaccinationPK.vaccinationMast.vaccinationName', displayName: 'Vaccination', width: '27%', enableCellEdit: false},
{field: 'defaultYn', displayName: 'DefaultYn',width: '10%' , cellTemplate: '<input type="checkbox" ng-model="row.entity.defaultYn" ng-really-message="Are you sure ?" ng-really-click="grid.appScope.updateRow(row)" ng-true-value="\'Y\'" ng-false-value="\'N\'">'},
{
//field:'',
name: 'Action',
cellTemplate: '<button class="btn btn-primary-joli" ng-click="grid.appScope.deleteRow(row)">Delete</button>',width: '9%'
}
],
onRegisterApi: function(gridApi) {
vm.gridApi = gridApi;
var cellTemplate='<div style= \"height:100px \" class=\"ui-grid-row-header-cell ui-grid-expandable-buttons-cell\"><div class=\"ui-grid-cell-contents\"><i ng-class=\"{ \'glyphicon glyphicon-calendar \' : row.entity.visitMasts[0].orderses.length !== 0 }\" ng-click=\"grid.appScope.showPopup(row)\" style=\"color: rgb(212, 106, 64)\";></i></div></div>'; //
vm.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 30, cellTemplate: cellTemplate , headerTooltip: 'Click icon to see details'} );
vm.gridOptions1.multiSelect = false;
vm.gridOptions1.modifierKeysToMultiSelect = false;
vm.gridOptions1.noUnselect = true;
}
};

Marking modified cell/row $dirty in ui-grid 3.0

I have a plunker that is ALMOST just like it is supposed to be. I have to add one requirement to it and I can't find it in the docs or on google.
The grid is set (to be like Excel) where you can begin to edit and the tab key will move from row to row. I need SOME WAY to mark a cell as $dirty if a change was made.
The requirement is an update button to save the ENTIRE grid if there were any changes (again, he wants it just like Excel).
Here's the plunker.
The issue: double-click an editable cell (name, status, M, T, W, H, F) and the tab key will cycle through the entire grid. If a cell value is changed, I need a way to mark it as dirty!
CODE:
(index.html)
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="lodash.js#*" data-semver="3.10.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<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="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<strong>Data Length:</strong>
{{ gridOptions.data.length | number }}
<br />
<strong>Last Cell Edited:</strong>
{{msg.lastCellEdited}}
<br />
<div ui-grid="gridOpts" ui-grid-edit="" ui-grid-cellnav="" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
(app.js)
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
$scope.$scope = $scope;
$scope.pending_view = true;
$scope.gridOpts = {
enableCellEditOnFocus: true,
enableGridMenu: true
};
var dataset = [{
vote_pending: false,
has_comment: false,
is_stale: false,
is_watched: false,
disbursement_issue: false,
name: "Jon",
status: 1,
M: 9,
T: 9,
W: 9,
H: 9,
F: 4
}, {
vote_pending: true,
has_comment: true,
is_stale: true,
is_watched: true,
disbursement_issue: true,
name: "Robbie",
status: 1,
M: 8,
T: 8,
W: 8,
H: 8,
F: 8
}, {
vote_pending: false,
has_comment: false,
is_stale: true,
is_watched: true,
disbursement_issue: false,
name: "Brad",
status: 1,
M: 8,
T: 8,
W: 8,
H: 8,
F: 8
}, {
vote_pending: false,
has_comment: true,
is_stale: false,
is_watched: false,
disbursement_issue: false,
name: "Paul",
status: 1,
M: 8,
T: 8,
W: 8,
H: 8,
F: 8
}, {
vote_pending: false,
has_comment: true,
is_stale: false,
is_watched: true,
disbursement_issue: false,
name: "Billie",
status: 2,
M: 8,
T: 4,
W: 4,
H: 4,
F: 0
}];
$scope.getTotal=function(a, b, c, d, e) {
return a+b+c+d+e;
};
$scope.gridweek = true;
var sByName = _.sortBy(dataset, 'name');
var sPending = _.sortByAll(dataset, ['is_watched', 'vote_pending', 'has_comment', 'disbursement_issue', 'is_stale']).reverse();
$scope.gridOpts.data = sPending;
$scope.pendingSort = function() {
if($scope.gridOpts.data === sByName) {
$scope.gridOpts.data = sPending;
} else if($scope.gridOpts.data === sPending) {
$scope.gridOpts.data = sByName;
}
};
$scope.gridOpts.columnDefs = [
{
name: 'id',
enableCellEdit: false,
enableColumnMenu: false,
headerCellTemplate: 'pending.hdr.html',
cellTemplate: 'pending.icons.html',
width: '15%'
},
{
name: 'name',
enableCellEdit: true,
displayName: 'Name',
cellClass: 'text-left cBlue',
headerCellClass: 'text-center bGreen',
enableColumnMenu: false,
width: '12%'
},
{
name: 'status',
enableCellEdit: true,
displayName: 'Status',
editableCellTemplate: 'ui-grid/dropdownEditor',
enableColumnMenu: false,
cellClass: 'text-left cBlue',
cellFilter: 'mapStatus',
headerCellClass: 'text-center bGreen',
editDropdownValueLabel: 'status',
editDropdownOptionsArray: [
{
id: 1,
status: 'FT'
},
{
id: 2,
status: 'PT'
}
],
visible: $scope.gridweek,
width: '14%'
},
{
name: 'M',
enableCellEdit: true,
displayName: 'M',
enableColumnMenu: false,
type: 'number',
cellFilter: 'number:1',
cellClass: 'text-right cBlue',
headerCellClass: 'text-center bGreen',
width: '8%'
},
{
name: 'T',
enableCellEdit: true,
displayName: 'T',
enableColumnMenu: false,
type: 'number',
cellFilter: 'number:1',
cellClass: 'text-right cBlue',
headerCellClass: 'text-center bGreen',
width: '8%'
},
{
name: 'W',
enableCellEdit: true,
displayName: 'W',
enableColumnMenu: false,
type: 'number',
cellFilter: 'number:1',
cellClass: 'text-right cBlue',
headerCellClass: 'text-center bGreen',
width: '8%'
},
{
name: 'H',
enableCellEdit: true,
displayName: 'H',
enableColumnMenu: false,
type: 'number',
cellFilter: 'number:1',
cellClass: 'text-right cBlue',
headerCellClass: 'text-center bGreen',
width: '8%'
},
{
name: 'F',
enableCellEdit: true,
displayName: 'F',
enableColumnMenu: false,
type: 'number',
cellFilter: 'number:1',
cellClass: 'text-right cBlue',
headerCellClass: 'text-center bGreen',
width: '8%'
},
{
field: 'total',
enableCellEdit: false,
displayName: 'Total',
enableColumnMenu: false,
type: 'number',
cellFilter: 'number:1',
cellClass: 'text-right',
headerCellClass: 'text-center bGreen',
cellTemplate: 'total.tmpl.html',
width: '10%'
}
];
$scope.msg = {};
$scope.gridOpts.onRegisterApi = function(gridApi) {
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
$scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue;
$scope.$apply();
});
};
}])
.filter('mapStatus', function() {
var statusHash = {
1: 'Full Time',
2: 'Part Time'
};
return function(input) {
if (!input) {
return '';
} else {
return statusHash[input];
}
};
});
I create a dirty flag on scope:
$scope.dirty = false;
and I update the function what monitors editions:
gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
$scope.$apply(function(scope) {
scope.dirty = true;
});
});
please see on plunkr: http://plnkr.co/edit/bSTXqp7wzLDL74rN3PII?p=preview
Try to adding a thin layer on top of the dataset to track record dirty status.
var records = [];
angular.forEach(dataset, function (rawdata) {
var record = {};
//Track changed attrs,
//keys are the changed properties and
//values are an array of values [origValue, newValue].
record.changedAttrs = {};
//record dirty status
Object.defineProperty(record, 'isDirty', {
get: function () {
return Object.getOwnPropertyNames(record.changedAttrs).length > 0;
}
});
angular.forEach(rawdata, function (value, key) {
Object.defineProperty(record, key, {
get: function () {
return rawdata[key];
},
set: function (value) {
var origValue = record.changedAttrs[key] ?
record.changedAttrs[key][0] : rawdata[key];
if(value !== origValue) {
record.changedAttrs[key] = [origValue, value];
} else {
delete record.changedAttrs[key];
}
rawdata[key] = value;
}
})
});
records.push(record);
});
Here is the plunker. Providing a custom row template and an extra line of css, the row bg color will change to yellow when the row is dirty.
rowTemplate: '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ' +
'ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" ' +
'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader , \'row-dirty\': row.entity.isDirty}" ' +
'role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>'
css
.ui-grid-cell.row-dirty {
background-color: yellow !important;
}
In addition to merlins answer.
His css style didn't work for me. What I did is:
.ui-grid-row-dirty div {
background-color: yellow !important;
}
which will set every cells (within the row) bg color to yellow.

Resources