CODEWITHSUNDEEP
angularjsangular-ui-grid
durga siva kishore mopuru
durga siva kishore mopuru

Reputation: 1347

How to disable and enable button based on column value by using UI-GRID?

This is my code

var app = angular.module('app', ['ngAnimate', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {

    $scope.myData = [{
        sv_name: "Moroni",
        sv_code: 50,
        isActive: false
    }, {
        sv_name: "Tiancum",
        sv_code: 43,
        isActive: true
    }, {
        sv_name: "Jacob",
        sv_code: 27,
        isActive: false
    }, {
        sv_name: "Nephi",
        sv_code: 29,
        isActive: true
    }, {
        sv_name: "Enos",
        sv_code: 34,
        isActive: false
    }];

    $scope.gridOptions = {
        enableSorting: true,
        data: 'myData',
        columnDefs: [{
            field: 'sv_name',
            displayName: 'Nombre'
        }, {
            field: 'sv_code',
            displayName: 'Placa'
        }, {
            field: 'action',
            cellTemplate: '<div>' + '<button ng-click="grid.appScope.delete(row)" >Delete</button>' + '</div>',
            enableSorting: false,
            enableColumnMenu: false
        }]
    };


}]);
   <!doctype html>
<html ng-app="app">
   <head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
   </head>
   <body>
  <div ng-controller="MainCtrl">
     <br>
     <br>
     <div id="grid1" ui-grid="gridOptions" class="grid"></div>
  </div>
  <script src="app.js"></script>
   </body>
</html>

In the above code i have 3 columns data , i am not displaying 3rd column data , but based on 3rd column isActive value true enable delete button ,when isActive value false disable delete button.

Upvotes: 0

Views: 4605

Answers (1)

un.spike
un.spike

Reputation: 5113

cellTemplate: '<div>' + '<button ng-click="row.entity.isActive || grid.appScope.delete(row)"  data-ng-disabled="row.entity.isActive">Delete</button>' + '</div>',

ng-disabled not working for ng-click, but you can use condition "TrueBoolValue || function(...)" in ng-click to disable function call if bool value is false.

Upvotes: 1

Related Questions