My Angular UI Grid setup includes:
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
};
(The data is loaded separately from this code). Below is the HTML where Testcontroller is the 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 implementation creates a table with a highlighted row based on a condition (row.entity.threads==150 in the row template). Now, I'm exploring options to automatically highlight rows with either the maximum or minimum value. Any insights on achieving this would be appreciated!