CODEWITHSUNDEEP
javascriptag-gridag-grid-angular
Oleh Marko
Oleh Marko

Reputation: 23

using agSetColumnFilter with serverSide row model

I'm using agSetColumnFilter in my Angular app, I'm using serverSide row model. If I use infinite row model it works correctly. I'm passing array of values to filter.

The problem is that I can't change a state of checkboxes in filter element.

If I click on one checkbox filters are applying with that one option, but it looks like the state of checkbox is changing to opposite immediately, and the state of filter doesn't save. I can choose only one category to filter.

<app-ag-grid  
  [columnDefs]="columnDefs" 
  [pagination]="pagination"
  [paginationPageSize]="paginationPageSize" 
  [rowModelType]="rowModelType" 
  [defaultColDef]="defaultColDef"
  [frameworkComponents]="frameworkComponents" 
  [context]="context" 
  [floatingFilter]="floatingFilter"
  [paginationAutoPageSize]="paginationAutoPageSize"
  (gridReady)="onGridReady($event)">
  </app-ag-grid>

@Component({
  selector: 'app-server-side',
  templateUrl: './server-side.component.html',
  styleUrls: ['./server-side.component.scss']
})
export class ServerSideComponent implements OnInit {
  paginationAutoPageSize = false;
  gridApi: GridApi;
  gridoptions;
  rowData;
  pagination = true;
  paginationPageSize = 100;
  rowModelType = 'serverSide';
  floatingFilter = false;
  defaultColDef = {
    sortable: false,
    editable: true,
    resizable: true,
    filter: true
  };
  enableServerSideSorting = true;
  enableServerSideFilter = true;
  columnDefs = [
    {
      field: 'isActive',
      headerName: 'Active',
      cellRenderer: 'checkboxRenderer',
      filter: 'agSetColumnFilter',
      width: 100,
      filterParams: {
      values: [true, false]
  }
},
{
  field: 'balance',
  headerName: 'Balance',
  filter: 'agNumberColumnFilter',
  width: 100,
  type: 'numericColumn',
  filterParams: {
    filterOptions: ['equals', 'lessThan', 'greaterThan'],
    suppressAndOrCondition: true
  },
},
{
  field: 'tags',
  headerName: 'Tags',
  filter: 'agSetColumnFilter',
  filterParams: {
    suppressRemoveEntries: true,
    values: (params) => {
      setTimeout(() => {
        params.success([
          'id',
          'irure',
          'cillum',
          'nostrud',
          'pariatur',
          'laborum'
        ]);
      }, 500);
    }
  }
}
];
context = { componentParent: this };
frameworkComponents = {
  listRenderer: ListRendererComponent,
  checkboxRenderer: CheckboxRendererComponent,
  multiselectEditor: MultiselectEditorComponent,
  dateEditor: DateEditorComponent,
  richTextEditor: RichTextEditorComponent,
  agDateInput: DateFilterComponent
};

Upvotes: 2

Views: 2414

Answers (1)

gtek
gtek

Reputation: 88

If you add newRowsAction: 'keep' to your filterParams object you should find that the state of the filter is retained when the checkboxes are deselected/selected. The docs are not clear in this regard (https://www.ag-grid.com/javascript-grid-filter-provided/#providedFilterParams) as they say the property is for use with Client Side row model only, but changing the filter causes the row data to be reloaded in server side mode, and this property 'keeps' the filters when that happens.

So, your tags field in columnDefs would be modified thus:

{
  field: 'tags',
  headerName: 'Tags',
  filter: 'agSetColumnFilter',
  filterParams: {
    newRowsAction: 'keep',
    suppressRemoveEntries: true,
    values: (params) => {
      setTimeout(() => {
        params.success([
          'id',
          'irure',
          'cillum',
          'nostrud',
          'pariatur',
          'laborum'
        ]);
      }, 500);
    }
  }
}

Upvotes: 4

Related Questions