I'm migrating KendoUI for jQuery to React. In jQuery version of Kendo Grid was possible to set "values" property to columns with "id" values.

In React version of the kendo grid, the "values" property for the GridColumn component is not available. How can I make the same like in jQuery version?

Thanks a lot for an each help.

I want to create a custom Kendo Grid component in React so that if there's any future update (e.g., changes like cell to cells), we can make the change in just one place instead of updating it everywhere in the project.

Currently, I have tried creating a custom wrapper for the Grid and Column components, but it's causing rendering issues.

Can you guide me on the correct way to create a reusable custom Grid and Column component using Kendo React Grid that works reliably with all features (sorting, filtering, paging, custom cells, etc.)?

Ideally, we want a centralized Grid component where we can pass in props like columns, data, and events, and handle all common logic in one place.

I have built a component in stackblitz
https://stackblitz.com/edit/react-sjktqaua?file=app%2Fapp.tsx,app%2Fgd-products.ts

Notably it has both the props needed for ctrl+c functionality:

and a row override:

This breaks the ctrl+C event. It no longer fires when custom row is applied to the grid. Am I missing anything? I am passing trProps

Hi,

I am trying to make a page with the grid that gets data from a Flask REST API. The data received is paginated. From the grid I also want to allow the user to filter and sort the data, which should make a request to the backend API, to receive filtered, sorted, and paginated data.

I have previously done this in Telerik Blazor using the OnRead function. I overwrote the OnRead function to automatically make a request upon filter, sort, or page change . Looking through the Kendo React documentation, I can't figure how to use DataSource with a REST API, the documentation seems to use OData. Is there something like Telerik Blazor OnRead, which I can use in Kendo React, or do i need to use functions like OnPageChange, OnFilterChange, to bind this functionality with the API?

For example, this is the kind of data i get from the API:

{
    "metadata": {
        "page": 1,
        "perPage": 50,
        "total": 120,
        "totalPages": 3
    },
    "assignments": [
        {
            "createdAt": "2025-02-20T00:00:00",
            "updatedAt": "2025-06-11T11:23:26.913674"
        }
    ]
}

And with the request on page change, on filter, or on sort, I would want to get the page, filter, sort data, and put them into query parameters to pass to the endpoint. I have attached an example image of query params I have from Postman below. 

I would highly appreciate it if anyone can help me figure out implement this functionality, ideally using a function like Telerik Blazor OnRead.

Thanks!

Hi Kendo Team,

We recently upgraded our project dependencies — Kendo UI Grid to v11.1 and React to v19.1.

After the update, we faced several issues with cell and headerCell, which we managed to resolve using your documentation. However, we are still encountering issues with the following:

1. rowRender – Our custom row rendering is not working as expected after the upgrade.

2. selectedField – Selection is not applying correctly on rows using this field.

3. expandField="expanded" – The expand/collapse functionality is not behaving as it did previously or not rendering the detail rows.

Can you please confirm:

• Are these features fully supported in Grid v11.1 with React 19.1?

• Are there any breaking changes or updated implementation patterns we should follow?

• Could you share examples or updated documentation for these features?

Thank you,

Hello! We've noticed that only in KendoReact components (not reproducible with our custom or 3rd party components) sometimes completely randomly these weird "â€<" characters show up. For example:

- Dropdowns:

- Dialogs:

This issue seems very similar to: https://www.telerik.com/forums/strange-characters-in-different-kendo-objects but while that's for Angular we are using React.

Some information:

- We are using an ARM64 version of Ubuntu with the Chromium browser
- We've checked and all data is stored as UTF-8 in our database (with the correct DB settings)
- We've checked and all response & request headers related to UTF-8 are set for all of our endpoint
- The issues does not reproduce on X86 Windows based systems or while working locally (from localhost)
- We are using KendoReact version 9.3.1 with the Fluent Theme version 10.1.0
- This issue pops up completely randomly and cannot be reproduced constantly
- We've investigated and checked and our fonts are loaded correctly. We also have some fallbacks in place, in case our font fails. All of them support UTF-8 characters
- We are NOT using Kendo's localisation feature
- Checking the Network requests from the DevTools reveals that the data comes correctly but is displayed incorrectly somehow

We ran out of ideas and this issue is really critical for our environment. Could you advise what should we investigate? As this issue only happens with Kendo components, to us it seems pretty clear that the issue lies there somewhere.
Thank you!

Hi 
In KendoReact Grid version 4.8.0, the date picker used in the filter menu exhibits inconsistent behavior. e.g. When a date is selected from the calendar (as shown in the first image, April 14, 2025), the value is not accurately applied to the filter input field. Instead, a different date (7/14/2025) appears in the input field (second image), which does not match the user's selection.

This creates confusion and leads to incorrect filtering of data, as the input field reflects a date that the user did not choose.
Refer this Images

Hello Kendo UI Team,

I'm using the Kendo React StockChart component and I have two related questions regarding hover behavior and color consistency between the main chart and the navigator (mini chart):

1. Hover color mismatch:
   When I hover over a data point, the marker uses a custom stroke color. However, the hover effect (like the highlight) does not match this stroke color.
      Is there a way to make the hover color consistent with the marker’s stroke color?

2. Navigator highlight inconsistency:
   When I click on a data point in the main chart, the corresponding point in the navigator becomes highlighted, but its color doesn't match the marker’s color either (it uses the default series color).
     Can we customize the highlight color in the navigator to match the main chart marker color as well?
   

For reference, I use a visual function to customize the markers with stroke colors dynamically based on the data item. The chart works fine visually, but the hover/highlight styles are inconsistent.

Let me know if this behavior is expected or if there's a recommended way to fully align the hover and highlight colors with custom marker styles.

Thanks!

Frsqz1ns (duplicated) - StackBlitz

Hi Telerik team,

I'm currently working with KendoReact Charts and noticed an unexpected behavior with series selection. Specifically, this happens with both Pie and Bar charts.

Issue

Whenever I:

1. Click anywhere inside the chart (any series),

2. Switch to another browser tab,

3. Return to the original tab,

— the first series gets auto-selected, and a black border appears around it.

What I’ve Tried

• I attempted to override :focus and .k-focus styles via CSS – didn’t help.

• Setting pointer-events: none on series did not prevent the behavior.

Reproduction

I’ve noticed the same issue in your official documentation examples too (see attached screenshot).
Also attaching a screenshot from my local app showing the same auto-selection border.

Question

How can I prevent KendoReact charts from auto-selecting or auto-focusing a chart series when returning to a tab?
Is there a prop or CSS workaround to completely disable this behavior?

Thanks in advance!