Questions on KendoReact Forum

1 answer

80 views

[Solved] Use of a Label component outside any Kendo layout component

I noticed that Label component has styling based on if it is inside any kendo component, including not only layout components but Form component as well. If placed outside any of them it lacks some font styling.
Even on documentation page here body element has added k-body class in order to add proper consistent styling.
What is proper use of Label component to have consistent styling across app? I'm not using kendo layouts on every page is there a non invasive layout i can add just to apply proper styling?

Labels

Styling

answered on 04 Aug 2025

1 answer

121 views

Can you surpass Content Security Policy for kendo libraries without setting 'unsafe-inline/eval'?

We are trying to update our React web app's Content Security Policy header to include default-src 'self'. This results in the web app failing, stating that the @progress/kendo-font-icons/dist/index.css style sheet refused to load. In other forum questions, similar issues have gotten the response to add 'unsafe-inline' or 'unsafe-eval' to the CSP configuration. This is a highly unsafe practice that would bring us out of compliance with our computer security service.

Is there any way to get Kendo stylesheets to work with CSP configurations without using unsafe-inline or unsafe-eval?

Security

answered on 01 Aug 2025

1 answer

167 views

How to Restrict Checkbox Selection to Only Checkbox Click in Kendo Grid Row Selection?

Title: How to Restrict Checkbox Selection to Only Checkbox Click in Kendo Grid Row Selection?

Description:

I am using the Kendo React Data Grid with row selection enabled via a checkbox column. My goal is to select a row only when the checkbox itself is clicked, not when any other part of the row is clicked.

However, currently, when I click anywhere in the row (e.g., the staff name), the checkbox also gets selected. This creates a problem in my use case — clicking the staff name navigates to the staff profile, but it also toggles the checkbox, which is unintended.

What I need:

I want the checkbox to be selected only when the checkbox is clicked, and not when clicking anywhere else in the row.

What I've tried:

I am using
selectable={{
enabled: true,
mode: 'multiple',
drag: false,
cell: false,
checkboxOnly: true
}}
but the issue still occurs.
I have a custom cell rendering for the name column that navigates on click.

Screenshot:

Uploaded image

Question:

How can I configure the Kendo Grid so that:

Checkbox selection is triggered only by clicking the checkbox.
Clicking on any other cell (especially with navigation) does not toggle checkbox selection?

Thanks in advance!

Grid

answered on 29 Jul 2025

1 answer

406 views

[Solved] Using external SVG Packs with components

We came up with a technique that allows us to use almost any SVG icon pack.

We needed 'AI & ML' icons and flaticons_com had them under the premium license.

Our team has been spending way too much time trying to get external icon sets working with Kend React components so we did what made sense.

Please look over answer, this what we came up with. Here is the screenshot of the demo included. It uses different icon-packs "iconFamily' switching from color to black etc...

Tom

Button

Drawer

updated question on 27 Jul 2025

1 answer

128 views

Customizing Visible Date Range in KendoReact Gantt Chart for Yearly, Monthly, and Weekly Views

Hi Kendo Team,

I'm currently working with the KendoReact Gantt Chart and would like to customize how many dates are visible in the chart for different views (Yearly, Monthly, Weekly). Specifically, I want to control the time span shown for each view — for example:

In Yearly view, show 5 years instead of the default range
In Monthly view, limit the chart to show only 6 months at a time
In Weekly view, show just 4 weeks of data

Is there a recommended way to configure the visible date range or scale for each view mode?

Any guidance or code example would be greatly appreciated!

Thanks

Gantt

answered on 25 Jul 2025

0 answers

179 views

Unable to Run npx kendo-ui-license activate in CI/CD Due to TLS Network Error

We are trying to activate the Kendo UI license as part of our CI/CD pipeline but are facing issues executing the npx kendo-ui-license activate command in our environment.

Environment Details:

We are using Microsoft OneBranch CI/CD pipeline templates.
Our NPM dependencies (including @progress packages) are hosted in a private Azure Artifacts registry.

Issue:

When we attempt to run the following command in the pipeline:

npx kendo-ui-license activate

we receive the following error:

Client network socket disconnected before secure TLS connection was established

This appears to be due to the agent’s inability to establish a secure connection to the required endpoint(s), possibly related to Telerik's license validation server.

Request:

Could you please guide us on how to properly activate the Kendo UI license in a CI/CD environment that cannot execute the above command due to network restrictions?
Is there a supported method to pre-activate the license locally and provide the license file (e.g., .kendo-ui-license.json) in the pipeline instead?
If so, could you confirm whether copying the license file to the appropriate location (e.g., ~/.kendo-ui-license.json) is sufficient for the build to proceed without executing the activation command?

We would appreciate your assistance in identifying a secure and compliant way to use our licensed packages in our automated build process.

Thank you,
Milin Hapani

Gantt

asked on 22 Jul 2025

1 answer

92 views

Kendo React Gantt Task Template

I would like to be able to set a custom template for the tasks on the Gantt component but am not able to figure out how to do that. I have seen examples (both here and elsewhere online) how to handle it using the Telerik UI for JQuery library but not for KendoReact. Any assistance with this is appreciated.

Gantt

answered on 17 Jul 2025

1 answer

129 views

[Solved] How to Apply a Common Wrapper to All Kendo Form Fields

Hi all,

I've been working with Kendo Form for a while and I'm now trying to add some custom behavior or styling to all my form fields. For example, I might want to consistently wrap them with extra logic, validation hints, or a custom layout.

Here’s a simplified case using a `Checkbox`:

<Field component={Checkbox} name="acceptTerms" />

To achieve the desired behavior, I’ve tried creating a `MyCustomCheckbox` component (see here). That works fine — but I don’t want to have to create `MyCustomInput`, `MyCustomDropdown`, `MyCustomDatePicker`, etc. for every component I use.

Is there a way to apply the same wrapper or logic at a more general level, so that I can just write:

<Field component={Input} name="email" />
<Field component={Checkbox} name="acceptTerms" />

…and have both get wrapped or enhanced in the same way — without duplicating the logic in multiple custom components?

Any tips or patterns would be greatly appreciated!

Thanks,
Grant

Form

answered on 17 Jul 2025

1 answer

121 views

KendoReact Grid Loading Indicator Issue - Inconsistent Behavior (v4.8.0)

Dear KendoReact Support Team,

I am experiencing an issue with the loading indicator on my KendoReact Grid, where it occasionally persists even after the data has successfully loaded from an API. This behavior is inconsistent, occurring on some screens of my application but not on others.

Here are the details of my setup:

KendoReact Grid Version: @progress/kendo-react-grid@4.8.0
Other KendoReact Packages:
- @progress/kendo-react-excel-export@5.16.1
- @progress/kendo-react-pdf@5.9.0
- @progress/kendo-theme-default@4.41.1
React Version: react@18.3.1, react-dom@18.3.1
Build Tool: Vite (^6.0.2)
Authentication: Auth0 (@auth0/auth0-react@2.2.4)
State Management: Redux Toolkit (@reduxjs/toolkit@2.4.0), React Redux (react-redux@9.1.2)
Date/Time Handling: Moment.js (moment@2.30.1)

Description of the Issue:

I have implemented a Higher-Order Component (withState) that wraps the KendoReact Grid. This HOC manages the data fetching (fetchData function), data state (pagination, sorting, filtering), and a local isLoading state.

My application currently controls a custom loading panel using this.state.isLoading. However, even when this.state.isLoading correctly transitions to false after a successful API response, the KendoReact Grid's own default loading indicator sometimes remains visible on certain pages. On other pages using the exact same withState HOC, the loading indicator disappears as expected.

I am not explicitly passing the loading prop to the KendoReact Grid component as part of its props currently, relying on its default behavior. My fetchData function correctly sets isLoading to true before the API call and to false in both the try (success) and catch (error) blocks.

Steps I have already taken/considered:

Confirmed that this.state.isLoading is being set to false correctly upon API success/failure via console logs.
Verified that API calls are completing successfully (HTTP 200 OK) on problematic screens.
Checked for JavaScript errors in the browser console after the API response.
Noted the version mismatch between @progress/kendo-react-grid@4.8.0 and other KendoReact 5.x.x packages, though I am unsure if this is directly contributing to this specific loading issue.

Expected Behavior: The KendoReact Grid's loading indicator should disappear promptly once the data fetch is complete and this.state.isLoading is set to false.

Request:

Could you please provide guidance on why the KendoReact Grid's default loader might persist despite the data being loaded and my internal loading state being reset? Are there specific scenarios or configurations related to version 4.8.0 that could cause this? Any recommendations for further debugging or best practices for controlling the grid's loading state in such a setup would be greatly appreciated.

Thank you for your time and assistance.

Sincerely,
Anduri

Grid

Loader

answered on 16 Jul 2025

1 answer

87 views

[Solved] How can I customize the "Add Task" button in the KendoReact Gantt toolbar?

I'm using the KendoReact Gantt component in my project and would like to customize the default "Add Task" button in the toolbar. I have a couple of requirements I need help with:

Customizing the "Add Task" button
- I’d like to change the label of the button.
Customizing the dropdown menu (that appears when an item is selected and "Add Task" is clicked)
- When an item is selected in the Gantt chart and the "Add Task" button is clicked, a menu appears with options like "Add Above", "Add Below", etc.
- I'd like to modify or extend this menu — either by changing the labels, hiding certain options, or adding new ones.

I've reviewed the official documentation but couldn’t find clear guidance on customizing this behavior.

Could you please let me know: