SelectionRange with Custom FIlter Cell to toDataSourceRequestString for requestState

3 posts, 0 answers
  1. Thomas
    Thomas avatar
    2 posts
    Member since:
    Sep 2020

    Posted 22 Sep 2020 Link to this post

    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. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 22 Sep 2020 Link to this post

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

  3. Thomas
    Thomas avatar
    2 posts
    Member since:
    Sep 2020

    Posted 22 Sep 2020 in reply to Stefan Link to this post

    Hello, thanks for replying.

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

Back to Top