SelectionRange with Custom FIlter Cell to toDataSourceRequestString for requestState

[Thomas]

Hi, i have a filter that needs to be sending a query to an aspnet core server, which the client gets from [toDataSourceRequestString](https://www.telerik.com/kendo-react-ui/components/dataquery/api/toDataSourceRequest/).

I am trying to use DateRangePicker to be within a filter query, with that i use SelectionRange to keep start date and end date.
And the operator looks something like this:
```ts
const inRange = (current, { start, end }) => (start === null || current >= start) && (end === null || current <= end);

return (
  <DateRangePicker
    {...props}
    onChange={event => {
      props.onChange({
        value: {start: event.value.start, end: event.value.end },
        operator: inRange,
        syntheticEvent: event.syntheticEvent,
      });
    }}
  />
```
which was grabbed from https://www.telerik.com/kendo-react-ui-develop/components/grid/filtering/#custom-filter-cells, at rangeFilterCell.jsx.

With that on Grid i use onDataStateChange with the event GridDataStateChangeEvent, that is where i set my requestState to GridDataStateChangeEvent.dataState.

An example on how my filters are setup, and the request string is created:
```ts
const [requestState, setRequestState] = useState<DataSourceRequestState>({
  skip: 0,
  take: 15,
  sort: [
    {
      field: 'id',
      dir: 'desc'
    }
  ],
  filter: {
    filters: [
      {
        field: 'status',
        operator: 'eq',
        value: 'Open'
      }
    ],
    logic: 'and' as const
  }
});

handleFetch(`${toDataSourceRequestString(requestState)}`);
```

When there is no date set, the querystring becomes `page=1&pageSize=15&sort=id-desc&filter=status~eq~'Open'`, as expected, and works.

But then when trying to filter the from-to date, the SelectionRange object does not translate it's value to querystring, leaving the querystring to be:
```
filter=(createdAt~(current,%20{%20%20%20%20start,%20%20%20%20end%20%20})%20=%3E%20(start%20===%20null%20||%20current%20%3E=%20start)%20&&%20(end%20===%20null%20||%20current%20%3C=%20end)~[object%20Object]~and~status~eq~%27Open%27)&sort=id-desc&page=1&pageSize=15
```

```
filter=(createdAt~(current, {
    start,
    end
  }) => (start === null || current >= start) && (end === null || current <= end)~[object Object]~and~status~eq~'Open')&sort=id-desc&page=1&pageSize=15
```
Note the [object Object], which is not parsable by the server, cause of obvious reasons.

I have also tried using with instead of the object containing start and end, but also with min max which is showed in the custom filter cells link shown above.

Here is the console.log version of the filter object:
```json
{
  "filter": {
    "logic": "and",
    "filters": [
      {
        "field": "createdAt",
        "value": {
          "start": "2020-09-02T22:00:00.000Z",
          "end": "2020-09-17T22:00:00.000Z"
        }
      },
      {
        "field": "status",
        "operator": "eq",
        "value": "Open"
      }
    ]
  },
  "sort": [
    {
      "field": "id",
      "dir": "desc"
    }
  ],
  "skip": 0,
  "take": 15
}
```

We have tried to see on different options, but it does not seem like there is a way.

[Stefan]

Hello, Thomas,

Thank you for the details.

When making a range date filter with Odata server I can suggest checking the approach shown in this GitHub item:

https://github.com/telerik/kendo-react/issues/355

This is because this has to be deconstructed to two separate filter expression after the start date and before the end date.

Please let me know if there are any issues using the approach from GitHub.

Regards,
Stefan
Progress Telerik

[Thomas]

Hello, thanks for replying.

You've helped me reach to the correct track, and ill hopefully be able to take this approach.