Using a filter with multiple conditions on a column in ag-grid

I have an ag-grid table where I have three columns – Request ID, Request Status and Submission Date. I’m using a text based filter on the Request ID column and a date range filter on he Submission Date. In Request Status, I have 4 request statuses – Draft, Submitted, Sent, Sending Failed. In HTML, I’m using a dropdown which has checkboxes for each of these statuses I have tried to make a filter which will allow me to select multiple conditions for the request status filter- for example, I want to see data which has request status either as draft or submitted.
This is my code for this filter:

change(event, text: string) {

  var index = this.ReqStatusFilter.indexOf(text);
  if(index == -1) {
    this.ReqStatusFilter.push(text);

  } else {
    this.ReqStatusFilter.splice(index, 1);
  }

  var finalArray = [];

  var k = 0;

  for(var i = 0; i < this.rowData.length; i++) {
    for(var j = 0; j < this.ReqStatusFilter.length; j++) {
      if(this.rowData[i].requeststatus == this.ReqStatusFilter[j]) {
        finalArray[k++] = this.rowData[i];
      }
    }
  }

 if(k != 0) {
  this.gridApi.setRowData(finalArray);
 } else {
   this.gridApi.setRowData(this.rowData)
 }

 this.gridApi.onFilterChanged();
}

I’m using ReqStatusFilter array to keep track of which statuses are selected currently. change() is called everytime a checkbox is clicked and text is the value of the checkbox that is clicked. rowData array contains the data of my grid.

The issue I’m facing is that the date filter on submission date and this request ID filter are working independent of each other. If I select a date range, where only messages with request status submitted and sent are available and then I click the checkbox for Draft in the request status filter, the message with status draft also appears. The filter is working fine with the text based filter on request ID. Say if I search for a request ID whose status is Draft and then I select the options Submitted and Sent for the request status, then nothing will appear. Basically, the filters should act as an AND between each other but the request status filter within itself should work as an OR of all the conditions selected. How can I sort this out so that the date and request status filter can work together? Posting the code for the Date filter too :

submissionDateFilter() {
var dateFilterComponent = this.gridApi.getFilterInstance("submissiondate");
dateFilterComponent.setModel({
  type:"inRange",
  dateFrom: this.fromDate.year + '-' + this.fromDate.month + '-' + this.fromDate.day,
  dateTo: this.toDate.year + '-' + this.toDate.month + '-' + this.toDate.day
})
this.gridApi.onFilterChanged();

}

I’ve tried my best to explain so I hope it wasn’t too difficult. If you have any doubts regarding the issue, just let me know.

Source: Angular

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.