How to restrict SlickGrid to make a API call, while clicking or changing compound filters?

Question

I have a SlickGrid Table, in which there are compound filters, currently when i try to change the compound filter (lets say from Equal To to Less Than), then it makes an API call. I don't want to make an API call, how do i achieve this?

I searched in slickgrid docs, but couldn't find any property(if it is available).

Image

Answer 1

Please note that I'm the author of Angular-Slickgrid

So I looked at the problem you're having and it seems like a valid problem to look into, I agree that for some filters like the Compound Date Filter Operator we shouldn't query right away, that is after changing a the operator dropdown without providing a date. So, for that reason I am adding a new grid option skipCompoundOperatorFilterWithNullInput which will avoid triggering a filter change (it will also avoid querying the backend when implemented) when we first change the operator dropdown without providing a date being entered.

Note that this new option will only be available with Angular-Slickgrid v5.1.0+ (via this PR , now supports this and it will only be enabled by default on the Compound Date Filter (any other filters will have to explicitly enable this new flag either via grid option or via a column definition).

What if I cannot upgrade to 5.1.0 ? Are there any other ways of dealing with this?

Yes, it's just a bit more involving dealing with this though, it however requires a lot more work from your side. The information you need to know is that nearly every piece of code from Angular-Slickgrid and Slickgrid-Universal are protected TypeScript classes and functions which mean that you can simply use TypeScript to extends any of them. Let's take for example the CompoundDateFilter class, we could extend it this way to skip the callback triggering without a date provided ( this._currentDate )

import { CompoundDateFilter, OperatorString } from '@slickgrid-universal/common';

export class CustomCompoundDateFilter extends CompoundDateFilter {
  protected onTriggerEvent(e: Event | undefined) {
    if (this._clearFilterTriggered) {
      this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
      this._filterElm.classList.remove('filled');
    } else {
      const selectedOperator = this._selectOperatorElm.value as OperatorString;
      (this._currentValue) ? this._filterElm.classList.add('filled') : this._filterElm.classList.remove('filled');

      // -- NEW CODE BELOW -- (to skip triggering callback on undefined date)
      // when changing compound operator, we don't want to trigger the filter callback unless the date input is also provided
      if (this._currentDate !== undefined) {
        this.callback(e, { columnDef: this.columnDef, searchTerms: (this._currentValue ? [this._currentValue] : null), operator: selectedOperator || '', shouldTriggerQuery: this._shouldTriggerQuery });
      }
    }

    this._clearFilterTriggered = false;
    this._shouldTriggerQuery = true;
  }
}

then use this new custom filter class in your column definitions

import { CustomCompoundDateFilter } from './custom-compoundDateFilter';

initGrid() {
  this.columnDefinitions = [{
    id: 'start', name: 'Start', field: 'start', 
    filterable: true, filter: { model: CustomCompoundDateFilter },
  }];
}

and there you have it, below is a proof that it is working since I changed the operator and as you can see below this action is no longer resulting in 0 row returned. However if I had done the inverse, which is to input the date but without an operator, it would have execute the filtering because "no operator" is defaulting to the "equal to" operator.