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.

'kendo' is not defined no-undef

Hello I encounter this error when using the pivot grid using the sample code below

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import '@progress/kendo-ui';
import { PivotGrid, PivotGridConfigurator } from '@progress/kendo-pivotgrid-react-wrapper';
class PivotGridContainer extends React.Component {
  constructor(props) {
    super(props);
    this.dataSource = new kendo.data.PivotDataSource({
      type: "xmla",
      columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Product].[Category]" }],
      rows: [{ name: "[Geography].[City]" }],
      measures: ["[Measures].[Reseller Freight Cost]"],
      transport: {
        connection: {
          catalog: "Adventure Works DW 2008R2",
          cube: "Adventure Works"
        },
        read: "https://demos.telerik.com/olap/msmdpump.dll"
      },
      schema: {
        type: "xmla"
      },
      error: function (e) {
        alert("error: " + kendo.stringify(e.errors[0]));
      }
    });
  }
  render() {
    return (
      <div>
        <PivotGridConfigurator dataSource={this.dataSource}
          filterable={true}
          sortable={true}
          height={300}>
        </PivotGridConfigurator>
        <PivotGrid dataSource={this.dataSource}
          filterable={true}
          sortable={true}
          height={550}
          columnWidth={200}>
        </PivotGrid>
      </div>
    );
  }
}
ReactDOM.render(<PivotGridContainer />, document.querySelector('my-app'));

Are there any variants to set popup height by content ? As I see, for that, we can use popupSettings.height for that, but in this case I have to calculate height manually.

Hi,

On most examples on telerik site there is a menu to switch between themes but I didn't managed to find some examples on how to actually implement it?

Any help ?

Thanks,

Arnaud.

Do we have any sample or blog for using KendoReact with Recoil.js? I already found one blog post but it never shows the using it with any KendoReact.

https://www.telerik.com/blogs/recoil-in-react

 

Hi all

probably I'm doing something completely wrong :-) I try to put a custom date format on one of my Grid columns, with the following

 

No matter what format I'm trying to put into the spec, the date always shows in my browser locale, e.g. Is there something else I must configure?

Hi,

I followed your toc-single-row-navigation example. Here is my grid https://stackblitz.com/edit/react-njk8q2?file=app/main.jsx and problem is that when are data filtered then arrows are moving row selection but also the page. Any suggestion how to prevent the page scroll?

Hi, 

I would like to display a context menu (similar to https://www.telerik.com/kendo-react-ui/components/layout/menu/context-menu/) when I right click on an item in a TreeView (https://www.telerik.com/kendo-react-ui/components/treeview/). The context menu should be aware of the relevant TreeViewItem that was right clicked on e.g. so I can perform an edit or delete. Is this possible?

Thanks, 
Grant

hi

how to Using kendo components in the kendo window component

When I use the following code, it does not show information to me

Hi,

i was following the odata server operation example ( https://www.telerik.com/kendo-react-ui/components/grid/data-operations/odata-server-operations/) and i see that the filters in that grid example returns data ignoring case. e.g contains -> 'car'  will return 'Carl'

 

But in my project its not doing the same, its returning data based on case e.g contains -> 'car' will return nothing but contains -> 'Car'  will return 'Carl'.

Our api is made in .net core API upon which Odata is implemented, so we tried (https://github.com/OData/WebApi/issues/812) this but since we are not implementing Odata directly that solution cannot be done.

Can you guys let me know how the backend of your server example is working so that i can have a look as to how it is returning data ignoring case, cause i dont see any toLower() method in your Filter object.

And is there any easy way to implement it, so that i dont have to manually add toLower() method to Filter object everytime there is a Datastate change.

 

Please let me know!! Thanks in Advance.