Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 895
Aslam Jiffry Avatar asked Sep 04 '16 09:09

Aslam Jiffry


2 Answers

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>
like image 112
JcT Avatar answered Nov 07 '22 04:11

JcT


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*/;
             */
           }

             ])         
like image 31
Pritish Vaidya Avatar answered Nov 07 '22 04:11

Pritish Vaidya