Telerik Forums
KendoReact Forum
1 answer
808 views

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.

Wissam
Telerik team
 answered on 10 Aug 2022
0 answers
1 view

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 out 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!

Peter
Top achievements
Rank 1
 asked on 10 Jun 2025
0 answers
7 views

By default the Slider displays a tooltip containing "Drag" on hover. Is it possible to change the text of this tooltip?

I've checked the documentation, but the Slider component doesn't have a prop for setting or styling the tooltip.

Wrapping a Tooltip Component around the Slider didn't work either.

Bastian
Top achievements
Rank 1
 updated question on 05 Jun 2025
2 answers
8 views

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

Muppalla
Top achievements
Rank 1
Iron
 answered on 04 Jun 2025
1 answer
6 views

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

Filip
Telerik team
 answered on 30 May 2025
1 answer
18 views

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!

Filip
Telerik team
 answered on 26 May 2025
0 answers
17 views
While headers can be made sticky on the MultiColumnComboBox, we're wondering if something similar can be applied to an entire group. In the MultiColumnComboBox dropdown, we'd like the first header and group items to always remain visible while the user scrolls through the remaining groups. If this isn't possible, is there a component similar to the MultiColumnComboBox that could achieve similar results?
Thomas
Top achievements
Rank 2
Iron
 asked on 22 May 2025
1 answer
11 views
I cannot compile the application because of these errors in the output:

The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.datasource/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.datasource/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.datasource/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.datasource/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.datasource/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.datasource/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.datasource/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.datasource/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.datasource/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.datasource/index.json' has timed out after 100000ms.
Lance | Senior Manager Technical Support
Telerik team
 answered on 21 May 2025
1 answer
17 views
I'm using the Kendo React TreeList and trying to lock the first two columns: one is a text column ("Name") and the other is a custom "Actions" column with buttons/icons.
The "Name" column locks correctly, but the "Actions" column only locks the header — the cell content scrolls with the rest of the grid.
I’ve used locked: true and assigned proper width, but it doesn't behave like a fully frozen column.
The action cell is rendered using a custom React component inside cell.
Is there a known limitation or workaround to fully lock custom cell columns in the TreeList?


below is one of the example that I am attaching...
please look into this and let me know
https://stackblitz.com/edit/react-kmatjerp-nshfqmfg?file=app%2Fapp.tsx
Yanko
Telerik team
 answered on 21 May 2025
1 answer
20 views

when I adaptive my component for another size I get this bug. How can I control line position of time. I didn't find any class or style to control behavior of scroll line. 

Yanko
Telerik team
 answered on 21 May 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?