CODEWITHSUNDEEP
angularjsangular-uing-grid
caleb
caleb

Reputation: 2817

Update filter on ng-grid when filter has not changed

http://plnkr.co/edit/3zxmNK?p=preview

I have 2 tables. They both bind to the same data, but the 2nd table filters on designation: part-time. When the designation is changed in the 1st table, I want the 2nd table to re-run the filter and update. For instance, initially there are 2 part-time employees; if I change another one to part-time, a 3rd row should appear in the 2nd table. Now, I have been able to accomplish this using a horrible hack (as can be seen in the Plunker). The hack is to slightly change the filter text to force the table 2nd table to be updated.

Now that if the filter text changes on an ng-grid, the table will get updated. In my case, however, it is the actual content, NOT the filter which I want to be changed (in this case, designation).

Does anyone know how to accomplish this same behavior without this hack?

Upvotes: 1

Views: 852

Answers (2)

caleb
caleb

Reputation: 2817

I found another solution, but it still feels a bit hackish to me, although slightly better than the original one:

$scope.partTimeOptions.ngGrid.init();

Here's an updated Plunker: http://plnkr.co/edit/BQRQZe?p=preview

Upvotes: 1

shaunhusain
shaunhusain

Reputation: 19748

You should be able to use a separate collection for your second grid. Then just watch the first collection for changes and do an update on the second collection which should automatically be reflected in the grid.

The updated JS

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.designations = ['full-time','part-time'];

  $scope.employeeData = [{name: "Moroni", age: 50, designation: 'full-time'},
                   {name: "Tiancum", age: 43, designation: 'full-time'},
                   {name: "Jacob", age: 27, designation: 'full-time'},
                   {name: "Nephi", age: 29, designation: 'part-time'},
                   {name: "Enos", age: 34, designation: 'part-time'}];

  $scope.partTimeData = [];

  $scope.employeeOptions = {
    data: 'employeeData',
    enableCellEdit: true,
    columnDefs: [{field: 'name', displayName: 'Name'},
                 {field: 'age', displayName: 'Age'},
                 {field:'designation', displayName:'Designation', 
                  cellTemplate: 'selectCellTemplate.html'}]

  };

  $scope.$watch("employeeData", function(){
    tempArray = [];
    for(var i=0;i<$scope.employeeData.length;i++){
      if($scope.employeeData[i].designation == "part-time")
        tempArray.push($scope.employeeData[i]);
    }
    angular.copy(tempArray, $scope.partTimeData);
  }, true);

  $scope.partTimeOptions = {
    data: 'partTimeData'
  };

  $scope.partTimeChangedIndicator = function(scope) {
    var watchStr = _.reduce($scope.employeeData, function (acc, emp) {
      return acc + emp.designation;
    }, '');
    return watchStr;
  };

  $scope.spaceAtEnd = true;
  $scope.$watch('partTimeChangedIndicator()',function() {
    var partTimeFilter = 'designation: part-time';
    if($scope.spaceAtEnd) {
      $scope.partTimeFilter.filterText = partTimeFilter + ' ';
      $scope.spaceAtEnd = false;
    }
    else {
      $scope.partTimeFilter.filterText = partTimeFilter;
      $scope.spaceAtEnd = true;
    }
  }, true);
});

http://plnkr.co/edit/Bml3S1?p=preview

Upvotes: 1

Related Questions