Telerik Forums
KendoReact Forum
1 answer
801 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
5 views

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!

 

Vessy
Telerik team
 updated question on 20 May 2025
0 answers
4 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
Dharmik
Top achievements
Rank 1
 asked on 20 May 2025
1 answer
5 views
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!
Yanko
Telerik team
 answered on 20 May 2025
1 answer
3 views
Hi Telerik support,

We are planning to use Kendo React v5.9.0 in our System and this system will be exported.
Could you please tell me the ECCN for Kendo React?

Thank you!

Hetali
Telerik team
 answered on 19 May 2025
1 answer
6 views
Is it possible to reset the grid page number after performing a filter? We're seeing a bug where if the initial grid load has n pages and you navigate to the nth page, but then filter so there's less than n pages, the grid becomes blank and doesn't show data again until you click on one of the page numbers again. Ideally I'd like to reset the user to the first page upon filtering.
Hetali
Telerik team
 answered on 19 May 2025
0 answers
3 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. 

Nurik
Top achievements
Rank 2
Iron
Iron
 asked on 19 May 2025
1 answer
18 views

Hi I am using the new statemanagement with checkboxes https://www.telerik.com/kendo-react-ui/components/grid/selection/multi-row-selection#combining-selection-with-data-operations-filtering-sorting-paging-etc

I want to replace that checkbox with our own design library's checkbox and style accordingly.

There's currently no way apart from inspecting and styling the component, would you guys suggest some ways to achieve this?

Vessy
Telerik team
 answered on 16 May 2025
1 answer
9 views
Hi Kendo Team,

I'm using the exportVisual and exportImage APIs to export a chart to a PNG file in my React application. I expected that setting a larger width and height in the exportImage options would result in a proportionally scaled-up chart. However, while the output image has the correct dimensions (e.g., 1920x1080), the chart content itself does not scale up — it stays small in the top-left corner and does not fill the canvas.

It seems that the exportImage function does not automatically scale the chart visual to match the specified output size.


Please let me know if this is the intended behavior or if there's a simpler way to scale the visual.

Thanks!
Dbcojf8y (forked) - StackBlitz
Filip
Telerik team
 answered on 13 May 2025
1 answer
7 views
I'm using autoProcessData=true in Grid, and I want to access the processed data after filters are applied. For example, if I start with 50 items and a filter reduces it to 10, how can I access those 10 filtered items? Is there a callback or method to get the processed data after filtering?
      <Grid
        data={addressList}
        dataItemKey={DATA_ITEM_KEY}
        className="k-grid-no-scrollbar border-none bg-transparent"
        autoProcessData={true}
        defaultSkip={0}
        defaultTake={10}
        pageable={{
          buttonCount: DEFAULT_TABLE_BUTTON_COUNT,
          pageSizes: DEFAULT_TABLE_PAGE_SIZES,
        }}
        sortable={{
          allowUnsort: true,
          mode: 'multiple',
        }}

      >

Filip
Telerik team
 answered on 13 May 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?