CODEWITHSUNDEEP
javascriptangularjsng-grid
Aslam Jiffry
Aslam Jiffry

Reputation: 1316

Angularjs ng-grid Highlight row dynamically

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.

Upvotes: 7

Views: 1686

Answers (2)

JcT
JcT

Reputation: 3569

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>

Upvotes: 3

Pritish Vaidya
Pritish Vaidya

Reputation: 22209

You can try something like this in your code -

        <input type="text" ng-style="{'background-color':'{{change}}'}" ng-change="anyFunction()">

and in the controller you can write a function to change the css of that particular textbox.Like - 

          .controller('myApp',['$scope',function($scope){
           $scope.change = /*any default value of color here*/
           $scope.anyFunction = function{
             /*if(required value greater than the demo quantity)
                  then change = /*your desired color*/;
             */
           }

             ])

Upvotes: 1

Related Questions