filter the ui grid value based on the row check box is selected

Question

This is the ui grid code( minimal)

//js file

vm.gridOptions1 = {
      enableColumnResizing: true,
      enableAutoResizing: false,

 columnDefs: [


        {
          field: 'createdDate',
          displayName: 'Created Date',
          type: 'date',
          cellFilter: 'date:"dd-MM-yyyy"',
          enableHiding: false, headerTooltip: 'Created Date'
        },{
          name: 'Refer',
          displayName: 'Refer', enableSorting: false, headerTooltip: 'Refer',
          cellTemplate: '<input type="checkbox" ng-model="row.entity.isReferred" />'
        }

]});

On click of this byutton I need to filter, get only rows which check box is selected(isReferred = true) //html file

<button type="button"  class="btn btn-primary-joli " ng-click="srchctrl.send">Send</button>

This is the file trying to get the filtered list based on the redeffered check box value, but its not working. //JS file

 vm.send = function () {
      if (vm.gridApi.selection.data != null && vm.gridApi.selection.data != undefined) {
         vm.referredList = filterFilter(vm.gridApi.selection.data, {
          isReferred: true
        });
        console.log("referredList :"+JSON.stringify(referredList));
      }
    };

How can I get all the value ticked. I don't want to invoke method on each click event on check box.

Answer 1

I think the easiest way to achieve this is by using the gridApi.grid.registerRowsProcessor function. I have adapted a Plunker to show what I mean:

http://plnkr.co/edit/lyXcb90yQ0ErUJnSH7yF

Apps.js:

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

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

  $scope.gridOptions = {
    columnDefs: [
        {field: 'col1', displayName: 'Column 1', width: 175},
      {field: 'col2', displayName: 'isReferred', width: '*'}
    ],
    data: [
      { col1: "Hello 1",col2: true},
      { col1: "Hello 2", col2: false},
      { col1: "Hello 3", col2: true},
      { col1: "Hello 4", col2: false},
      { col1: "Hello 5", col2: true}
    ],
    enableFiltering: true,
    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
    }
    };

  $scope.Filter = Filter;
  $scope.ShowAll = ShowAll;

  function ShowAll() {
    $scope.gridApi.grid.removeRowsProcessor(myFilter);
    $scope.gridApi.core.queueGridRefresh();
  }

  function Filter() {
    $scope.gridApi.grid.registerRowsProcessor(myFilter, 150);
    $scope.gridApi.core.queueGridRefresh();
  }

  function myFilter(renderableRows) {
    renderableRows.forEach( function(row) {
      row.visible = row.entity.col2;
    });
    return renderableRows;
  }
}]);

Clicking the Filter button will register the myFilter RowsProcessor, which will iterate through all rows to alter the visible attribute. Clicking the ShowAll button will remove the RowsProcessor, thus showing all previously hidden rows again.

Whenever an isReferred value changes, the filter will cause the grid to automatically update this change.