Grid Remote Filtering with Filter Row update frequency

[mddifilippo89]

Hello IG team!

I have a problem with the way your current filtering logic is being applied.

I am using the event filteringExpressionsTreeChange to set my filter model which I then send back to the API which I use to apply the filter in my DB and then return back that filtered data and display it inside your IgrGrid (latest version).

Problem is the event is fired up on every user input, so that means my request is also fired up on every-user input and that quite expensive query to be ran every second on my DB, i.e we cannot allow that kind of logic.

So I am wondering can I somehow use the "check" icon in the Quick Filter (attachment) which finally appends the filter so that when the end-user clicks on it my request is sent back to the API.

Also is there any way I can apply only remote-side filtering on this data grid, its kinda annoying that even though I am fetching data back from the API and resetting my grid's respective data property, the data grid does the filtering on the client side as well (why?).

My paging mode is set to 1 (Remote):

Here is my code:

const filteringExpressionsTreeChange = (dataGrid, filterEvent) => { const { detail: { filteringOperands = [] } = {} } = filterEvent || {}; const filterColumns = {}; const filterColumnObjects = [];

const processFilterColumn = (filterColumn) => {
  const filterOperatorName = filterColumn?.condition?.name;
  const fieldName = filterColumn?.fieldName;
  const searchVal = filterColumn?.searchVal;
  if (isNaN(searchVal)) {
    dataGrid.clearFilter(fieldName);
    onInitialLoad({
      dataModel: {
        filterColumnObjects: [],
      },
    });
    return;
  }
  if (filterOperators) {
    const filterOperatorObject = {
      operator: filterOperatorName,
      value: searchVal,
    };
    filterColumnObjects.push({
      key: fieldName,
      value: getFilterOperator(filterOperatorObject)?.value.toString(),
      operator: getFilterOperator(filterOperatorObject)?.operator,
    });
  } else filterColumns[fieldName] = searchVal;
};

filteringOperands.forEach((operand) => {
  console.log(operand);
  operand?._implementation?.filteringOperands.forEach((filterColumn) => {
    if (filterColumn?.filteringOperands)
      filterColumn.filteringOperands.forEach(processFilterColumn);
    else processFilterColumn(filterColumn);
  });
});

const dataModelKey = filterOperators
  ? "filterColumnObjects"
  : "filterColumns";
const dataModelValue = filterOperators
  ? filterColumnObjects
  : filterColumns;

if (dataViewSize)
  onInitialLoad({
    dataModel: {
      [dataModelKey]: dataModelValue,
    },
  });
else
  fetchAndStoreData({
    filterColumns,
  });

};

<IgrGrid {...commonTableProps} className="sport-tickets" ref={ref} primaryKey="ticketNumber" rowSelectionChanging={onRowSelectChange} rowHeight="26px" sortingExpressionsChange={onSortModelChange} filteringExpressionsTreeChange={filteringExpressionsTreeChange} pagingMode={1} dataPreLoad={handleDataPreLoad}>

[damyanpetev]

This has been included in the communication I believe, but I'll leave some of my comments here for everyone else:

It's very likely the behavior might be by design that the filtering updates immediately as you type along in the Filter Row UI so the expression changes. For reference try in https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/filtering Even the remote demo (Angular, because React samples don't have it yet) updates on every key stroke: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/remote-data-operations

[damyanpetev]

Alternative options would be Excel Style Filtering that opens a dialog and only does work when you hit apply, though not the same UI paradigm at all, unfortunately.

[damyanpetev]

Also the event can be simply debounced/throttled with a timeout outside the normal typing speed so the request fires off - kind of how you'd normally handle these cases with user input tied to a dynamic request and should reduce the amount of requests to a minimum.

[damyanpetev]

That being said, the current Filter Row UI setup doesn't really have a good path to work with remote filtering and this is worth investigating as an enhancement

[mtsvyatkova]

The following feature request is logged regarding the client side filtering as currently there is no exposed filtering strategy which disables it: https://github.com/IgniteUI/igniteui-react/issues/80