Angularjs ng-grid Highlight row dynamically

Question

I have following ng-grid.

  $scope.IssueGrid = {
            data: 'IssueGridList',
            multiSelect: false,
            selectedItems: $scope.selectedRow,
            enableColumnResize: true,
            enableRowSelection: true,
            headerRowHeight: 65,
            columnDefs: [

                { field: 'Item', width: '25%', displayName: 'Item Name' },
                { field: 'RequiredQuantity', displayName: 'Requested Qty', cellTemplate: '<div style="text-align:right;"  class="ngCellText">{{row.getProperty(col.field)}}</div>' },
                { field: '', width: '7%', displayName: 'To be Issued', cellTemplate: '<div class="ngCellText {{row.entity.cellClass}}"> <input type="text" id="issQty" style="text-align:right;" data-ng-change="editIssueQty(row)" data-ng-model="row.entity.IssueQty" number-only-input input-value = "row.entity.IssueQty" class="form-control" data-ng-disabled="issueQtyDisabled(row.entity)" value = {{row.getProperty(col.IssueQty)}} /></div>' },
                ],
            showFooter: true
        };

This grid has text box to enter "IssueQty". But when ever value is entered to Issued quantity, if it is greater than "RequiredQuantity" entire row should be Highlighted.

Can anybody suggest a way to achieve this..

Thanks and regards.

Answer 1

Consider using a rowTemplate (see Row Templates) that uses ng-class and row.getProperty to set a 'highlight' class for the entire row.

rowTemplate:'<div ng-style="rowStyle(row)" ng-class="{highlighted: row.getProperty(\'IssueQty\') > row.getProperty(\'RequiredQuantity\') }"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                       '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>' +
                       '<div ng-cell></div>' +
                 '</div></div>'

(function() {
  "use strict";

  angular
    .module("myApp", ['ngGrid'])
    .controller("MyCtrl", ['$scope', MyCtrl]);

  function MyCtrl($scope) {
    $scope.IssueGridList = [
      {Item:'test1', RequiredQuantity:1, IssueQty:0},
      {Item:'test2', RequiredQuantity:2, IssueQty:0}
    ];

    $scope.IssueGrid = {
      data: 'IssueGridList',
      multiSelect: false,
      //selectedItems: $scope.selectedRow,
      enableColumnResize: true,
      enableRowSelection: true,
      showFooter: true,
      columnDefs: [

                { field: 'Item', width: '25%', displayName: 'Item Name' },
                { field: 'RequiredQuantity', width:'25%', displayName: 'Requested Qty', cellTemplate: '<div style="text-align:right;"  class="ngCellText">{{row.getProperty(col.field)}}</div>' },
                { field: '', width: '50%', displayName: 'To be Issued', cellTemplate: '<div class="ngCellText {{row.entity.cellClass}}"> <input type="text" id="issQty" style="text-align:right;" data-ng-change="editIssueQty(row)" data-ng-model="row.entity.IssueQty" number-only-input input-value = "row.entity.IssueQty" class="form-control" data-ng-disabled="issueQtyDisabled(row.entity)" value = {{row.getProperty(col.IssueQty)}} /></div>' },
                ],
        
        rowTemplate:'<div ng-style="rowStyle(row)" ng-class="{highlighted: row.getProperty(\'IssueQty\') > row.getProperty(\'RequiredQuantity\') }"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                           '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>' +
                           '<div ng-cell></div>' +
                     '</div></div>'
    };
  }

})();

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 500px; 
    height: 300px;
}
.highlighted {
  background-color: yellow;
}

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="gridStyle" ng-grid="IssueGrid"></div>
</div>