How to use Quick Filter with Server-side / Infinite row model?

Question

As per documentation: Quick Filter, quick filter works with clientSide row model.

We are using serverSide row model for ag-grid and we have a requirement to use quick filter with the data we have at client - in the cache blocks of the grid.

I though of using filter pipe with [rowData]="myRowData", but with this row model, I don't get any data from myRowData.

For example, if you have a look at this plunk Server side row model - quick filter, I have assigned [rowData]="rowData" in the markup and initialised it as [].

After loading initial chunk from server, I was assuming that the cache block data should be accessible with it, so that using angular pipe, I would be able to filter out the data at client side (mimicking the quick filter with serverSide row model). Something like [rowData]="rowData | filter: filterText" - like what we used to do in angularjs

But I'm afraid the cache data are not accessible with rowData.

How can we somehow use Quick Filter with ag-grid having serverSide row model?

Answer 1

I would say it wasn't an easy task.

But here is how it could be solved:

1. As you already mentioned quickFilter is a clientSide model type feature
2. But no one has cancelled the setFilterModel way of usages

   It would require a lot of hacks and could break something (you have to check it on your solution and write a feedback then)

First of all, setFilterModel can't work with virtual data (we have to define column especially for quickFilter logic)

{
    field:'-', would be used as a reference
    hide:true, - hide in grid data
    lockVisible:true, - disable visibility changing via menu
    filter:"agTextColumnFilter", - require for setFilterModel
    filterParams:{
      newRowsAction: "keep"
    }
},

Next, we need to create a workaround for filterModel in datasource

getRows: function(params) {
    setTimeout(function() {
        var dataAfterSortingAndFiltering = sortAndFilter(data, params.sortModel, params.filterModel);
        var rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
        var lastRow = -1;
        if (dataAfterSortingAndFiltering.length <= params.endRow) {
            lastRow = dataAfterSortingAndFiltering.length;
        }
        params.successCallback(rowsThisPage, lastRow);
    }, 3000);
}

function sortAndFilter(allOfTheData, sortModel, filterModel) {
  return sortData(sortModel, filterData(filterModel, allOfTheData));
}
function sortData(sortModel, data) {
  ... sort logic here (doesn't matter for now) ...
}

Now about quickFilter logic, we've defined dummy column for it and here how it should be used:

setFilterModel will accept only existing column name ("-" in our case)

and with limited object props: but we will use filter (as it used in real cases)

applyFilter(){
    this.gridApi.setFilterModel({"-":{filter: this.filterText}})
}

and the last point of implementation is filterData function

function filterData(filterModel, data) {
  let filterPresent = filterModel && Object.keys(filterModel).length > 0;
  if (!filterPresent) { - if filter model is empty - skip it
    return data;
  }
  data = data.filter(i=>{
    if(Object.keys(i).some(k => i[k] && i[k].toString().toLowerCase().includes(filterModel['-'].filter)))
      return i;
  })
  return data;
}

Each object would be explored, and if any property contains quickFilter value - it would be in the result

Moreover, once you will scroll out of existing range (infinite scroll case) requested data would be filtered by this property

*not sure about duplicated data check on request

My sample

Your modified sample

Answer 2

Eventually I found ag-Grid's support article:

https://ag-grid.zendesk.com/hc/en-us/articles/360020488612?input_string=serverside+quick+filter

Its first example suggests to edit the getRows of your ServerSideDatasource to append to params.request a new key.

For example, you could do something like the following:

const customParams = {};
customParams.quickFilterValue = 'someQuery';

In onGridReady:

const datasource = createServerSideDatasource(server, customParams);
event.api.setServerSideDatasource(datasource)

/**
 *
 * @param {object} server
 * @param {object} customParams
 * @returns {object}
 */
export function createServerSideDatasource(server, customParams) {
  // https://www.ag-grid.com/javascript-grid-server-side-model-datasource/

  return {
    getRows: function (params) {
      params.request.customParams = customParams // Our backend will need to handle this custom 'customParams' key that the frontend attaches to the request (which itself will contain a quickFilterValue key and maybe others).

      const response = server.getData(params.request);

      if (response.success) {
        params.successCallback(response.rows, response.lastRow);
      } else {
        params.failCallback();
      }

    },
  };
}