CODEWITHSUNDEEP
javascriptangularjs
Bogdan Timofeev
Bogdan Timofeev

Reputation: 1092

How to highlight row with maximum cell value in Angular UI Grid?

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

Answers (1)

Mahesh
Mahesh

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

Related Questions