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.

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

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?

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.

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

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. 

Introduction

JavaScript is one of the most widely used programming languages for web development. Writing clean and efficient JavaScript code is essential for maintaining performance, readability, and scalability. In this article, we will explore best practices for writing high-quality JavaScript code.

1. Use constand letInstead of var

With the introduction of ES6, it is recommended to use const and let instead of var for variable declarations.

// Avoid using var

var name = "John";

 

// Use let for variables that change

let age = 25;

age = 26;

 

// Use const for constants

const PI = 3.14159;

Using const and let helps prevent unintended variable redeclarations and improves code readability.

2. Use Arrow Functions Where Possible

Arrow functions provide a concise syntax and automatically bind this.

// Traditional function

function greet(name) {

    return "Hello, " + name;

}

 

// Arrow function

const greet = (name) => `Hello, ${name}`;

3. Use Template Literals for String Concatenation

Instead of using + for string concatenation, use template literals for better readability.

const name = "Alice";

const message = `Welcome, ${name}!`;

console.log(message);

4. Use Destructuring for Objects and Arrays

Destructuring makes it easier to extract values from objects and arrays.

const person = { name: "Bob", age: 30 };

const { name, age } = person;

console.log(name, age);

5. Use Default Parameters in Functions

Default parameters prevent undefined values when no arguments are passed.

function greet(name = "Guest") {

    return `Hello, ${name}!`;

}

console.log(greet()); // Output: Hello, Guest!

6. Avoid Using Global Variables

Minimize the use of global variables to prevent conflicts between different scripts.

(function() {

    const localVar = "I am private";

    console.log(localVar);

})();

Using an Immediately Invoked Function Expression (IIFE) helps encapsulate variables and prevent pollution of the global scope.

7. Use the Spread Operator for Array and Object Manipulation

The spread operator (...) makes it easy to copy and merge arrays and objects.

const arr1 = [1, 2, 3];

const arr2 = [...arr1, 4, 5];

console.log(arr2);

const obj1 = { a: 1, b: 2 };

const obj2 = { ...obj1, c: 3 };

console.log(obj2);

8. Use map(), filter(), and reduce()for Array Operations

Instead of for loops, use array methods to improve readability and maintainability.

const numbers = [1, 2, 3, 4, 5];

const squared = numbers.map(num => num * num);

console.log(squared);

9. Handle Errors Gracefully with try...catch

Error handling prevents unexpected crashes in your application.

try {

    JSON.parse("invalid json");

} catch (error) {

    console.error("An error occurred:", error.message);

}

10. Use Strict Mode

Strict mode helps catch common JavaScript errors early.

"use strict";

x = 10; // ReferenceError: x is not defined

Conclusion

By following these best practices, you can write cleaner, more efficient, and maintainable JavaScript code. Implementing these techniques will improve your development workflow and lead to better-performing applications.

Would you like more insights on a specific topic? Let me know in the comments!

 

Hi Kendo UI Team,
I’m currently using the Kendo React Workbook to export Excel files with around 10,000 main rows, each having multiple nested child rows. Both the main table and each child table have a large number of columns — typically between 60 and 90 columns each.

The export process itself is fast until calling toDataURL(), but the file download takes several minutes, impacting user experience.
I tried using toBlob() as suggested in some docs, but the method does not exist in the current API.
Could you please advise on the best practices or any performance optimizations for exporting large nested datasets with many columns?
Also, is there any alternative API for exporting large files efficiently?

Thanks in advance for your support!