Hi,

 

https://stackblitz.com/edit/react-gmfcy6-5rknaj

In above example I'm using grouping and row selection as well.
Issue is: row selection is not working when grouped. IF you remove grouping `unit in stock` and click on any row it will immediately highlight selected row.

 

Thanks
Vikram E.

I've category column (contains unique guid) in my data[].
While showing category column in grid, somehow I've managed to show respective category_name instead of category_id at clientside.

I'm using GridColumnMenuCheckboxFilter to show checkbox filter with all possible filterable values.
But all checkboxes in category filter popup shows category_id (which is default behavior), this is not readable to user.

Can I change labels of checkboxes in category filter popup from category (i.e category_id) to category_name.

 

 

Hi.

I am trying to implement a detail row in my grid, as shown in this example:

 

https://www.telerik.com/kendo-react-ui/components/grid/rows/detail/

 

It works great, but how can I make this editable as well? I need to be able to edit all columns, details as well.

Is this possible? whatever I tried didn't work for me.

 

Thanks!

 

 

Hi,

 

I'm working on a Kendo React Grid in my application and I'm trying to figure out how to navigate each 'td' (cell) of the grid using tab key. I was able to navigate where i have buttons rendered in a cell (using cell option).

I have followed below example which uses rowRender but it was selecting whole row.

https://stackblitz.com/edit/react-njk8q2-qlvomy?file=app/main.jsx

 

Is there a way to navigate to each cell of the grid when using tab key?

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?