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.
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.