Angular5: show hidden rows in ag-grid

Question

Below is my service response, as soon as the page loads the grid shows only those rows whose result is yes. Now, my page also has a show all check box, so as soon as the checkbox is checked all the hidden rows should also be visible and as as soon as I un-check the check-box only rows with result = yes should be visible. How can I achieved this show/hide rows functionality? Please guide. Below is my code so far, I did used refreshCells but it is not giving me expected results.

    data = {
        name: "A",
        result: "no"
       },
       {
        name: "B",
        result: "no"
       },
       {
        name: "C",
        result: "yes"
       },
       {
        name: "D",
        result: "yes"
       }

    private gridApi;
    private dataCopy;

    constructor() {
      this.dataCopy = data;
    }

    this.gridOptions = {
      isExternalFilterPresent: function() { 
        return true; 
      },

      doesExternalFilterPass: function(rowNode) { 
        return rowNode.data.result = "yes"; 
      }
    };

    onGridReady(params) {
       this.gridApi = params.api;
    }

    //function call on checkbox click
    showAll(event) {
      if(event.target.checked) {
        this.gridApi.refreshCells(this.dataCopy); 
      }
    }

    //HTML
    <input type="checkbox" (change)=showAll($event)

Answer 1

Regarding your use of ag-grid's api.refreshCells(), I don't think that will result in the grid in updating the row values, as the intended behaviour of that method will only affect the cells which are currently rendered, as mentioned in the documentation.

You can adopt the following ways which willallow you to update row nodes instead, and there are a few approaches when it comes to that.

1) With one-way data binding to the [rowData] input property binding. This will work for frameworks such as Angular and React. You can do this by binding your checkbox to a change event. Then, we create a shallow copy of your data, and then filter/assign your row data values according to the checkbox selection. I have made a short demo here.

<input type="checkbox" (change)="toggleCheckbox($event)"/>
.
.

ngOnInit() {
  this.dataCopy = [...this.rowData];
}

toggleCheckbox(event){
  if (event.target.checked) {
    this.rowData = this.dataCopy;
  } else {
    this.rowData = this.dataCopy.filter(obj => obj.result === 'yes');
  }
}

2) Using api.setRowData(newData).

3) Using api.updateRowData(transaction). Using this method is preferred, if you want to maintain the previous grid state.