How to use gt/le operator in aurelia slickgrid with Odata

Question

I want to send my own operator in odata request and not use the aurelia slickgrid inbuilt "eq" operator.

This is my column definition

{
                id: 'LockoutEndDateUtc', name: 'Status', field: 'LockoutEndDateUtc', minWidth: 85, maxWidth: 95,
                type: FieldType.boolean,
                sortable: true,
                formatter: Formatters.multiple,
                params: { formatters: [this.StatusFormatter, Formatters.checkmark] },
                filterable: true,
                filter: {
                            collection: [ 
                                { value: 'le ' + (() => {const dt = new Date(); return dt.toISOString().split('.')[0] + "Z";})(), label: 'True' }, 
                                { value: 'gt ' + (() => {const dt = new Date(); return dt.toISOString().split('.')[0] + "Z";})(), label: 'False' }
                            ], //['', 'True', 'False'],
                            model: Filters.singleSelect,//multipleSelect//singleSelect,
                        }
            }

This is the UI

This is how the request filter looks like..

$filter=(LockoutEndDateUtc%20eq%20le%202022-06-28T12%3A59%3A25Z)

If i remove %20eq from the above request, everything else works. So my question is how to i remove %20eq. Or how do i send my own gt, le in the request.

Answer 1

You can't really do that on a boolean filter (you could however do it on a date filter with operator ) and I don't think I've added any ways to provide a custom filter search the way you want to do it, but since you're using OData, you have a bit more control and you could change the query string yourself. To be clear, it's not at all recommended to change the OData query string, it's a last solution trick and at your own risk, but for your use case it might be the only way to achieve what you want.

prepareGrid() {
    this.gridOptions = {
      // ...
      backendServiceApi: {
        service: new GridOdataService(),
        process: (query) => this.getCustomerApiCall(query),
      } as OdataServiceApi
    };
  }
}

getCustomerApiCall(query: string) {
  let finalQuery = query;
  // in your case, find the boolean value from the column and modify query

  // your logic to modify the query string
  // untested code, but it would probably look similar
  if (query.includes('LockoutEndDateUtc%20eq%20true')) {
    // calculate new date and replace boolean with new date
    finalQuery = query.replace('LockoutEndDateUtc%20eq%20true', 'LockoutEndDateUtc%20le%202022-06-28T12%3A59%3A25Z');
  }
  return finalQuery;
}

Another possible solution but requires a bit more work.

If I'd be using a regular grid, without backend service and without access to the query string, I would probably add an external drop down outside of the grid and also add the date column and then control filters in the grid by using dynamic filtering. You can see a demo at Example 23 , the principle is that you keep the column's real nature (date in your case) and filter it, if you want something like a "below today's date" then add an external way of filtering dynamically (a button or a drop down) and control the filter dynamically as shown below (from Example 23)