This is a migrated thread and some comments may be shown as answers.

SelectionRange with Custom FIlter Cell to toDataSourceRequestString for requestState

2 Answers 98 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 22 Sep 2020, 12:51 PM
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.

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 22 Sep 2020, 01:26 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Thomas
Top achievements
Rank 1
answered on 22 Sep 2020, 01:51 PM

Hello, thanks for replying.

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

Tags
General Discussions
Asked by
Thomas
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Thomas
Top achievements
Rank 1
Share this question
or