Reputation: 1092
I've got an Angular UI Grid, which is defined like
var rowtpl='<div ng-class="{\'extremum\':row.entity.threads==150 }"><div 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></div>';
$scope.gridOptions = {
enableHorizontalScrollbar: 0,
enableSorting: true,
enableFiltering: true,
enableColumnResizing: false,
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
noUnselect: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
if (row.isSelected) {
var importedData = row.entity;
DataService.selectedImportedDataId = importedData.id;
$scope.selectedData = importedData;
}
});
},
columnDefs: [
{ name: "Run", field: "run" },
{ name: "Time of Day", field: "tod" },
{ name: "Rate", field: "rate" },
{ name: "MB/sec", field: "mbps" },
{ name: "Response", field: "resp" },
{ name: "xfersize", field: "xfersize" },
{ name: "Threads", field: "threads" },
{ name: "queue_depth", field: "queue_depth" },
{ name: "Read %", field: "read_percentage" },
{ name: "Read response", field: "read_resp" },
{ name: "Write response", field: "write_resp" },
{ name: "lunsize", field: "lunsize" }
],
data: [],
rowTemplate: rowtpl
};
(Data is loaded outside of this code). Here is my HTML, Testcontroller is name of my controller.
<div ng-controller="TestController" class="row">
<div class="container-fluid">
<div class="row">
<div ui-grid="gridOptions"
ui-grid-edit
ui-grid-auto-resize
ui-grid-selection
ui-grid-save-state>
</div>
</div>
</div>
</div>
This code creates a table with one row highlighted (row is selected with row.entity.threads==150
in my row template). Can I highlight the row with the value not selected by myself, but with maximum or minimum value?
Upvotes: 0
Views: 535
Reputation: 1635
You can try it this way.
Your Row template:
var rowtpl='<div ng-class="{\'extremum\':row.entity.threads==150, \'highlight\':row.entity.isMaximum }"><div 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></div>';
You need to add highlight
class to your css.
When you are getting a data, you can loop through it to check the maximum value and set a flag entity.isMaximum = true
.
For calculating maximum in your data array, you can use any of the maximum finding function in javascript. One such function is available in UnderscoreJS
Sample implementation is as below.
var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.max(stooges, function(stooge){ return stooge.age; });
=> {name: 'curly', age: 60};
If you are still getting any issues with this solution, please post your data object.
Upvotes: 1