KendoReact Forum RSS

Latest Online Resources about KendoReact

Hello everyone,

Here are the highlights of the new online resources we published this week from 10 Nov 2025 to 17 Nov 2025:

Article: https://www.telerik.com/kendo-react-ui/components/grid/smart/selection
Summary: Learn how to use Smart Selection in the KendoReact Grid to manage row or cell selection that remains consistent across virtualization, paging, sorting, filtering, and grouping. The article shows how to enable the mode, configure single/multiple and checkbox selection, and implement a controlled selection state via selection-change callbacks on the client or server.

Article: https://www.telerik.com/kendo-react-ui/components/migration/assisted-migration
Summary: Use KendoReact Assisted Migration to move a Kendo UI for jQuery app to KendoReact: it scans your code, maps jQuery widgets to React components, and generates starter React code where possible. The article walks you through prerequisites, running the migration, reviewing the suggested changes, and the manual follow-ups required to reach parity (events, props, data binding, styling, unsupported features), plus how to validate and iterate safely.

Article: https://www.telerik.com/kendo-react-ui/components/migration/available-codemods
Summary: This page lists the KendoReact migration codemods and the exact changes they perform, including automated updates to imports, component names, props, event handler signatures, and subcomponent APIs across specific versions. It shows you how to run each transform with jscodeshift for JavaScript/TypeScript, what files and packages are affected, and any limitations, so you can pick the right codemod and review the diff before committing.

Article: https://www.telerik.com/kendo-react-ui/components/updates/breaking-changes/13-0-0
Summary: Before upgrading to KendoReact 13.0.0, review the documented breaking changes. The article lists component-level API removals and renames, behavior and theming updates, and other deprecations, along with required migration steps. Use it as a checklist to update imports, props, and configuration across affected packages.

Article: https://www.telerik.com/kendo-react-ui/components/updates/rendering-changes/13-0-0
Summary: KendoReact 13.0.0 introduces rendering changes across multiple components, updating DOM markup, CSS class names, and ARIA attributes. The article enumerates the affected components with before/after examples and migration notes so you can update custom CSS, query selectors, and automated tests that depend on the previous structure. Use it to assess breaking changes when upgrading and to verify UI, accessibility, and E2E test coverage.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/pdf-export-in-new-tab
Summary: Learn how to open a KendoReact PDFExport result in a new browser tab instead of triggering a download. You export the PDF to a Blob (e.g., via exportPDF), create a blob URL with URL.createObjectURL, open it with window.open or a programmatically clicked anchor, and then revoke the URL; account for popup blockers and CORS for images/fonts.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-reduce-header-height
Summary: Learn how to reduce the KendoReact Grid header height by adjusting header cell padding and line-height. The article demonstrates two approaches: per-column customization via headerStyle/headerClassName or a custom headerCell, and a global CSS override targeting the Grid header, ensuring sorting and filtering icons remain aligned.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-hide-columns-initially
Summary: Use component state and the KendoReact GridColumn hidden property to render a Grid with specific columns hidden initially. The article walks you through wiring the column menu to toggle visibility and keep Grid features like sorting, filtering, and resizing in sync with the controlled column state.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/expansion-panel-prevent-enter
Summary: Prevent the KendoReact ExpansionPanel from toggling on Enter by handling keyboard events explicitly. Add an onKeyDown handler to the header or nested inputs to detect Enter and call event.preventDefault() and event.stopPropagation(), or control the expanded state and ignore Enter in onChange; the examples preserve click/space behavior while disabling Enter-triggered expand/collapse.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-wrapper-component-gridcolumn
Summary: Learn how to build a React wrapper around the KendoReact Grid while still defining columns with GridColumn. The article explains that GridColumn must be direct children of Grid and demonstrates a correct wrapper pattern that forwards props and children without wrapping or cloning the column components, so the Grid’s type checks can detect the columns reliably.

Article: https://www.telerik.com/blogs/working-kendoreact-window-component
Summary: Use the KendoReact Window component to implement draggable and resizable windows in React with controlled open/close state, positioning, and a customizable title bar and action buttons. The article shows how to wire up event handlers for close, move/drag, and resize, and how to manage multiple windows and dynamic content while keeping windows within viewport constraints.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 29 Oct 2025 to 05 Nov 2025:

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/ai-assistant
Summary: This guide shows you how to integrate the KendoReact AI Assistant with an LLM backend (OpenAI or Azure OpenAI) through a server-side proxy. You’ll configure system and user prompts, maintain conversation state, enable streaming responses, and implement tool/function calling with custom handlers, along with token, error, and safety handling. It includes code for wiring requests and responses, provider setup, and best practices for securing API keys.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/agentic-ui-generator
Summary: Use the KendoReact Agentic UI Generator to convert natural-language requirements and optional structured inputs (for example, JSON schemas or sample data) into React code that assembles KendoReact components via an LLM-driven agent workflow. The article shows you how to install and configure the tooling and an LLM provider, invoke the generator, steer component/layout choices, iterate on the output, and export the code, with notes on customization and safety considerations.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/ai-assistant/mcp-server
Summary: This article shows you how to integrate a Model Context Protocol (MCP) server with the KendoReact AI Assistant so your React app’s LLM can call custom tools and access resources. You’ll run or implement an MCP server that exposes JSON‑schema tools/resources, then configure the AI Assistant to connect to it and route tool invocations and results, including environment and authentication setup.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/ai-assistant/prompt-library
Summary: Learn how to use the KendoReact AI Assistant Prompt Library to define and show reusable, parameterized prompts as suggestions in your React app. The article explains the prompt schema (id, title, text with variable placeholders and metadata), configuring variables (required flags, defaults, sources), grouping and ordering prompts, and wiring the library into the Assistant via the promptLibrary prop, with options to programmatically trigger prompts and customize rendering. It also covers passing runtime context into variables and handling events when a prompt runs.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/ai-assistant/copilot-extension
Summary: Learn how to set up the KendoReact AI Assistant Copilot Extension to embed an AI copilot/chat experience in your React app. You’ll install and configure the extension, connect it to an OpenAI/Azure OpenAI backend via a secure server endpoint, and scaffold the Copilot UI with KendoReact components. The article also shows how to customize system prompts, actions/tools, context passing, and response handling.

Article: https://www.telerik.com/blogs/kendoreact-hackathon-winners-new-built-kendoreact-showcase
Summary: This article reviews the KendoReact Hackathon winners with concise breakdowns of what each team built, which KendoReact components they used in React, and key implementation takeaways. It also introduces updates to the Built with KendoReact Showcase so you can browse real implementations, study component usage patterns, and follow the steps to submit your own React app.

Article: https://www.telerik.com/blogs/zod-typescript-schema-validation-made-easy
Summary: Learn how to use Zod with TypeScript to define runtime-validated schemas that also infer static types, keeping validation and types in sync. The article covers core patterns—z.object, unions/intersections, optional/nullable, discriminated unions, refine/superRefine, transform, parse vs safeParse, and structured error handling—and applies them to form validation, API request/response validation, and environment variable parsing. It also shows how to compose schemas and reuse types with z.infer across frontend and backend to avoid duplicate validation logic.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 20 Oct 2025 to 27 Oct 2025:

Article: https://www.telerik.com/blogs/boost-site-speed-speculation-rules-api-guide-prerendering-prefetching
Summary: Learn how to use the Speculation Rules API to cut navigation latency by prerendering and prefetching likely next pages. You’ll define a script type=speculationrules with prefetch/prerender rules (document vs list, where href_matches, eagerness), follow constraints such as same-origin prerender and anonymous-client-ip-when-cross-origin for cross-origin prefetch, and gate side effects with document.prerendering and the prerenderingchange event. The guide also shows how to measure impact via PerformanceNavigationTiming (activationStart) and when to choose prefetch vs prerender.

Article: https://www.telerik.com/blogs/static-extraction-css-js-efficiency-react-apps
Summary: Learn how static extraction compiles CSS-in-JS at build time so your React app ships less JavaScript, injects fewer styles at runtime, and reduces bundle size, hydration cost, and render time. The article contrasts runtime CSS-in-JS with statically extracted CSS, outlines build setup (Babel/SWC with Webpack or Vite) to extract CSS and enable effective code splitting and tree shaking, and shows how to handle dynamic styles and validate gains with bundle analyzers and browser DevTools.

Feel free to check them out and share your thoughts!

The Telerik Team

GridColumn values property not exists in React version of Kendo grid

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.

Cara Menghubungi Contact Center Super Air Jet

(+62)83800100566 Contact Center Super Air Jet.." Hubungi Untuk Kendala dan Pertanyaan Tentang Penerbangan Anda

Cara Bicara Dengan Call Center Super Air Jet

(+62)83800100566 Nomor layanan Customer Service Super Air Jet..Pusat Pengaduan Pelanggan.

Cara Bicara Dengan Call Center TransNusa

Ada pertanyaan dan kendala...Telpon Layanan Kami..dinomor: +6283800100656 Live Chat WhatsApp online 24jam

Layanan Customer Service TransNusa

+6283800100656 Nomor Layanan Customer Service TransNusa Indonesia..Pusat Pengaduan Pelanggan

Cs Garuda Indonesia

Anda bisa menghubungi layanan pelanggan Garuda Indonesia di (O899-979-1983) untuk pengajuan refund tiket Garuda Indonesia.

Cara pembatalan Pinjaman Akulaku 100% Berhasil

Hubungi Call Center (Akulaku) di nomor (083848484874) atau melalui email ke cs@akulaku.com. Sampaikan permintaan pembatalan pengajuan pinjaman dan berikan alasan anda melakukan pembatalan...

Call Center TransNusa Indonesia

(+62)83800100656 Hubungi kami Telpon atau WhatsApp Layanan Pusat Bantuan TransNusa Indonesia..Online 24jam.

Generic type support for dataItem in components (Eg: Grid)

Hi team,

I'm working with KendoReact Grid and need to strongly type the `dataItem` property in custom cell components. Currently, `GridCustomCellProps` has `dataItem: any`, which loses type safety.

I've been creating wrapper types like:

// Base generic type for any Kendo component with dataItem
type WithTypedDataItem<K, D> = Omit<K, 'dataItem'> & { dataItem: D };

// Specific type aliases for common use cases
type TGridCustomCellProps<T> = WithTypedDataItem<GridCustomCellProps, T>;
// ... others

Questions:
1. Is there a native/commonly accepted way to type `dataItem` that I'm missing?
2. Are there plans to add generic type parameters to `GridCustomCellProps` (e.g., `GridCustomCellProps<TDataItem>`) in future releases?

This would improve type safety across Grid, ComboBox, DropDownList, and other components that use dataItem.

Thanks,
Grant

Grouped Grid not rendering when data size is changed

Hi,

When a grid is grouped, and its scroll mode is 'virtual', drag the scroll bar down to the middle, then change the data to a smaller set of data. The grid is not rendering the new data, the scroll bar size is changed, indicating the grid is aware of the new data size, but it just doesn't render the rows.

If the Grid is not grouped, this won't be an issue.

Please see this example: https://codesandbox.io/p/sandbox/headless-leftpad-m75s56?file=%2Fapp%2Fapp.tsx

Steps to reproduce the issue:

- Use mouse to drag the grid scrollbar down to the middle.

- Click Short Data button.

- The scroll bar size has changed, but the grid is not showing data,

- Drag the scrollbar, the grid shows the data again.

Thanks,

Jie

Export GanttHandle

Hi Support,

The GanttHandle mentioned here https://www.telerik.com/kendo-react-ui/components/gantt/api/gantthandle does not appear to be exported.

This means a ref can not be used in a un typesafe manner.

Can this be exported in a future release?

Thanks

David

localization example

Hi kendo-react devs.

I'm coming from Kendo UI for jQuery and am beginning Kendo UI for React.

I have localisation implemented in a .net9 + react project; however, I can't get the messages/default text in the kendoui react components (grid pager) to update when the language changes.

This is an overview of the project's localization implementation:

Multi-language support**: Danish (primary), English, Greenlandic
Frontend**: react-i18next with `da.json`, `en.json`, `kl.json` translation files
Backend**: Comprehensive JSON-based localization system with `ILocalizationService` + caching
Database**: Reference data with `LocalizedNames` and `LocalizedDescriptions` JSON columns
Language Detection**: `LanguageMiddleware` extracts language from query string (?lang=da) or Accept-Language header
Kendo UI components use default English - localization not implemented

Do you have a project/demo app with both react-i18next and localization of kendoui messages/texts (like "items per page", etc.)?

I really appreciate any help you can provide.

Morten

Kendo React Grid: onRowDoubleClick stops working with custom rows & Selection Aggregates

I have implemented Selection Aggregates to count content inside cells. For this I use the onSelectionChange prop, passing a selectionChange function that calls getStatusData from '@progress/kendo-react-grid' and stores the result in the statusData state.

Recently I added a requirement to highlight the row when I select a cell in that row, so I decided to use a custom row renderer via the rows prop and pass a row component.

But here’s the problem: as soon as I started using the custom row renderer, the double-click handling that used to work via the Grid's onRowDoubleClick stopped working. I tried handling the double-click directly on the <tr> by attaching an onDoubleClick handler, but that didn't help either.

As far as I can tell, the issue is that when I click a cell, onSelectionChange fires and I update the state with the result of getStatusData (which is necessary for Selection Aggregates). That state update causes my rows to re-render, and the double-click never fires. If I don't use a custom row renderer (which I need for row highlighting), I can attach onSelectionChange on the Grid, update the state on click for Selection Aggregates, and onRowDoubleClick works.

How can I combine Selection Aggregates, row highlighting when selecting a cell (currently implemented with the custom row renderer), and double-click handling?

Link for sandbox: https://codesandbox.io/p/sandbox/keen-andras-kyzf5c

Code:

import * as React from "react";
import {
  Grid,
  GridColumn as Column,
  GridSelectionChangeEvent,
  StatusBar,
  getStatusData,
  StatusItem,
  GridCustomRowProps,
} from "@progress/kendo-react-grid";
import sampleProducts from "./gd-sample-products";

const DATA_ITEM_KEY = "ProductID";

const App = () => {
  const [statusData, setStatusData] = React.useState<StatusItem[]>([
    { type: "count", formattedValue: "0", value: 0 },
  ]);

  const selectionChange = (event: GridSelectionChangeEvent) => {
    console.log("selectionChange single-click");
    setStatusData(
      getStatusData({
        dataItems: sampleProducts,
        target: event.target,
        select: event.select,
        dataItemKey: DATA_ITEM_KEY,
      })
    );
  };

  const CustomRow = (props: GridCustomRowProps) => {
    // console.log("CustomRow props: ", props);
    const available = !props.dataItem.Discontinued;
    const noBgr = { backgroundColor: "" };
    const customBgr = { backgroundColor: "lavender", fontWeight: "bold" };

    return (
      <tr
        {...props.trProps}
        style={available ? noBgr : customBgr}
        onDoubleClick={(e) => console.log("CustomRow onDoubleClick e: ", e)}
        onClick={(e) => {
          console.log("CustomRow single click");
        }}
      >
        {props.children}
      </tr>
    );
  };

  return (
    <>
      <div style={{ padding: "5px", color: "#999" }}>
        <div>Ctrl+Click/Enter - add to selection</div>
        <div>Shift+Click/Enter - select range </div>
      </div>
      <Grid
        rows={{ data: CustomRow }}
        onRowDoubleClick={(e) => console.log("onRowDoubleClick")}
        data={sampleProducts}
        autoProcessData={true}
        dataItemKey={DATA_ITEM_KEY}
        reorderable={true}
        navigatable={true}
        defaultSelect={{
          4: [0],
          5: [0],
          6: [0],
          7: [0],
        }}
        selectable={{ enabled: true, drag: true, cell: true, mode: "multiple" }}
        onSelectionChange={selectionChange}
      >
        <Column title="Products">
          <Column field="ProductID" title="Product ID" width="100px" />
          <Column field="ProductName" title="Product Name" width="300px" />
          <Column field="UnitsInStock" title="Units In Stock" />
          <Column field="UnitsOnOrder" title="Units On Order" />
          <Column field="ReorderLevel" title="Reorder Level" />
          <Column field="Discontinued" title="Discontinued" />
          <Column field="FirstOrderedOn" title="Date" format="{0:d}" />
        </Column>
        <StatusBar data={statusData} />
      </Grid>
    </>
  );
};
export default App;

chart tooltip hovering

The chart tooltip is visible on hovering on the series, but doesn't disappear when we hover out chart or unless we click outside of the series, I want to hide the tooltip once we hover outside of series, how to achieve it? I have seen it using jquery but wasn't able to replicate it

https://www.telerik.com/forums/hide-chart-tooltips-when-leave-series

How do I add a clear button icon to a dropdown list so the user can clear the selected value?

I am currently utilizing a KendoReact Form with an integrated DropDownList component. However, the selected value cannot be cleared by the user. I have reviewed external documentation, but a clear explanation for implementing this functionality is absent. Could you provide a coding example demonstrating how to implement a clear button on the dropdown within this form structure?

I need to add a clear icon to my dropdown list so that the user can click it to clear the selected value

Are ther any helpers/utils for managing Composite/FilterDescriptor arrays

Hi team,

Working with complex or even slightly nested CompositeFilterDescriptors gets confusing quick, does KendoReact contain any kind of helpers for managing a filter tree, adding, updating or removeing Composite/FilterDescriptors?

My usecase is that i need to build a composite filter desc where filters contaisn a mix of FilterDescriptor and CompositeFilterDescriptor, and im hanving trouble maintianing such an object, hence the question.

eg:

// All search mechanisms are external to the Grid component
// eg: https://www.telerik.com/kendo-react-ui/components/grid/filtering/advanced-filtering#filtering-data-grid-through-external-textbox
{
  logic: 'and',
  filters: [
    // This CompFiltDesc is controlled by a single 'Product Search' box, the goal is to find any record where 
    // ther code or description contains any of the text, so 'mix chef' and 'checf mix' return the same thing
    {
      logic: 'or',
      filters: [
        { field: 'productItem.description', operator: 'contains', value: 'chef' },
        { field: 'productItem.code', operator: 'contains', value: 'chef' },
        { field: 'productItem.description', operator: 'contains', value: 'mix' },
        { field: 'productItem.code', operator: 'contains', value: 'mix' }
      ]
    },
    {
      field: 'quantity', operator: 'isnotnull'
    },
    {
      field: 'productItem.attributes', operator: 'contains', value: 'Brand:x'
    }
  ]
}

THanks,
Grant

Links for dimension values

I'd like to be able to render links as a Dimension value where appropriate.

The Dimension display value is defined as

displayValue: (item: any) => string

I can't use a jsx fragment here of if I attempt to return an '< a href....' it is html encoded and rendered as html.

Ideally I'd like to add a <Link component but would settle for an <a tag

Is this achievable?

Popover's callout disappears

Hi, I use Popover for showing error messages during validation. First it renders fine, but when I switch tabs(my app has multiple tabs) callout disappears completely. Here's how I use the component:

```ts
<Popover
show={show}
anchor={inputRef.current}
position="bottom"
contentStyle={{ padding: '0.5em', border: 'black' }}
collision={{ horizontal: 'flip', vertical: 'flip' }}
appendTo={container}
>
```Screenshot attached.

PanelBar .k-focus

Hi Telerik Team,

I’ve noticed that in the PanelBar component, the element .k-link.k-selected receives the .k-focus class even when it’s clicked with the mouse.

This behavior causes a visible focus style to appear after mouse interactions.
For our design system, we’d like to preserve focus styling only when navigating via keyboard (Tab), not when clicking with the mouse.

Could you please advise if there’s a way to adjust or override this behavior without breaking the normal tab-focus functionality?

We are currently customizing Telerik React Kendo components to match our UI/UX requirements.

Thank you!

Regards,
Bohdan

Grid component labels

Is there a way to create a Grid component where the first column has rows that are static/hard coded. i.e. in the same way that a table in excel would work with different cells on the left hand side then values across to the right for each column?

GridColumnState.hidden can't override GridColumnProps.hidden

Hi,

If GridColumnProps has { hidden: true} in it, then GridColumnState won't be able to override the `hidden` property anymore.

Please see this example:

https://codesandbox.io/p/sandbox/stoic-wildflower-wn4lzn?file=%2Fapp%2Fapp.tsx%3A11%2C10-11%2C25

Line 15, customerID column's hidden is set to true. Clicking the "Hide" button won't show/hide that column. But if change customerID's `hidden` value to `false`, or just remove that hidden property at line 15. The "Hide" button will work.

Thanks,

Jie

React Grid Column Width Support for %

We are migrating to React Grid from React Wrapper Grid and one issue is that the column width doesn't seem to support % and only seems to support pixel width. Is there a work around for this or is this in any upcoming releases?

rowSpannable does not exist

Hi,

I'm trying to use rowSpannable with Grid, and I get the following error:

Property 'rowSpannable' does not exist on type 'IntrinsicAttributes & GridProps & RefAttributes<GridHandle | null>

Issue with scrolling attachments in Chat

In KendoReact Chat, when multiple attachments are added, the attachment container shows files with limited width. However, the scroll behavior is incorrect. After clicking the scroll arrow, the container scrolls to the end, but a small gap remains at the end that cannot be scrolled into view.

https://www.telerik.com/kendo-react-ui/components/conversationalui/chat/customization/attachment-templates

Lack of localization of text for "columnMenu" in TreeList component

Hello! Could you please explain how to localize text in columnMenu?

I have forked an example from the documentation: TreeList Globalization, and added columnMenu to it.

My sandbox example here

But despite the expectation that it will also be translated into Spanish, as well as filter, I see a standard text that cannot be replaced / translated by LocalizationProvider:

Is this a known problem? Will this issue be fixed? Or maybe I somehow set up sandbox example incorrectly?
I will be grateful for explanations.

Thanks in advance,

Ekaterina.

How to customize Checkbox column in React DataGrid to hide/show conditionally

Hi All,

I want to achieve a feature using DataGrid. Lets say we are binding Orders in the grid with Active and Order ID column

1. If Order is "Active" then I would like to show Checkbox to select that row. The row should be highlighted upon selection just like the default row selection behavior in Kendo React Grid

2. If Order is "inActive" then I would like to hide the checkbox. I do not want to make it visible disable checkbox.

Please suggest if anyone has done this kind of implementation earlier. Please suggest any OOTB configuration or customization if we have any for Checkbox Column.

Webstorm Support for AI

Hi all

I"m a user of Webstorm from JetBrains as part of my IDE suite. I've no real plans to go back to Visual Studio Code, however, I would like to be able to use the AI features, of which I can only find the implementation in VS.

What are the plans to support Webstorm?

How to hide grid's no record message?

How to hide grid's "no record" completely? I just want to leave the grid blank, without the "No Records Available" block.

Thanks,

Jie

When grouping the grid, not all rows are displayed.

I use a grid with grouping and virtual scrolling. In the example, the length of the data array is 20, take is 10. If we group the grid, we will see only 10 elements. When sorting a group, the data changes, but there are still 10 of them. How do I create grouped data correctly so that all groups and all data are displayed?

https://stackblitz.com/edit/react-kkjtitaq?file=app%2Fapp.tsx,app%2Fgd-sample-products.ts

Thanks!

Want to add a button inline with the kendo React tab

I have created a kendo tabstrip with 2 tabs. I want to add buttons inline with the tabs and to their extreme right. I have attached a screenshot of the functionality I want to achieve.

Kendo React : Determine value of specific theme color

How can I get the value of a specific theme color (at runtime). For example, background/foreground of a selected row in a grid? background/foreground of a focused row in a grid? I have my own non-Kendo React components that I want to blend with the selected Kendo React theme.

How do scroll the grid so that the selected row is at the bottom of the displayed list?

Hey Team!
I use a grid. I will describe a simplified example of my task.
If you scroll up the grid and press button 20, scrollIntoView will scroll through the grid so that the row under index 20 will be at the top of the visible grid list. This behavior is expected. But if I scroll to the bottom of the grid and press button 20, I need the row under index 20 to be at the bottom of the displayed list. How to achieve this behavior?

https://stackblitz.com/edit/react-mcskf5cg?file=app%2Fapp.tsx

Thanks!

lockGroups of Grid component

Hello.

I'm using the grid with grouping version 11. I don't set the column widths. A question about the lockGroups property. If you do not use it, the width of the header and grid columns is the same, and the name of the dimension is displayed in one row (example 1).

If you add lockGroups, the width of the header and grid columns does not match and each word of the group name is moved to a separate line (example 2).

If you add width to the columns, then the columns begin to match, except for the last one, but this does not help the names of the groups.

By adding the lockGroups property, how can I save the display of the original grid, where everything matches (as example 1)?

example 1:
https://stackblitz.com/edit/react-qjv8cnyt?file=app%2Fmain.tsx,app%2Fapp.tsx

example 2:
https://stackblitz.com/edit/react-qjv8cnyt?file=app%2Fapp.tsx

Thank you!

Kendo React DatePicker with clearButton should reset to initial placeholder + floating label state

Hi Kendo React team,

I’m using the Kendo React DatePicker with dateInput and clearButton={true}.

Here’s the behavior I’m seeing:

Initial state: The input shows the floating label (Date Start) and the placeholder (dd.MM.yyyy.).
When a value is selected: The date is shown correctly in the input.
After pressing the clear button: The input shows only the placeholder (dd.MM.yyyy.), but the floating label does not reset to the initial state.

What I would like instead is that when the clear button is clicked, datePicker should return to the exact same initial state.

I’ve attached a screenshot showing the three states (initial, selected, and after clear) for clarity.

Version is: @progress/kendo-react-dateinputs: "9.3.1"

Thanks!

git credentials for KendoReact source code?

how do i obtain git credentials for the source code? I tried the instructions but my Telerik account email and password didn't work (I entered my Telerik email and pass into the git credential manager popup):

$ git clone https://kendo.git.progress.com/kendo-react-private.git
Cloning into 'kendo-react-private'...
fatal: Authentication failed for 'https://kendo.git.progress.com/kendo-react-private.git/'

Grid group footer is not sticky

Hi,

Please see the example - https://codesandbox.io/p/sandbox/silly-wind-tpfg8n

When column "Unit Price" is locked, while moving the horizontal scroll bar, the group header is sticky (expected behavior), but the group footer is not sticky (wrong behavior).

Thanks,

Jie

GridCellsSettings.group.groupHeader not working if set in Column

Hi,

`GridCellsSettings.group.groupHeader` only works when set in <Grid />, doesn't work if set in <Column />.

This works:

<Grid
    cells={{
        group: { groupHeader: GroupMyHeaderCustomCell }
    }}
>

This doesn't work:

<Grid>
    <Column
        cells={{
            group: { groupHeader: GroupMyHeaderCustomCell }
        }}
    />
</Grid>

Can you please explain the difference?

Thanks,

Jie

Kamal Hinduja Geneva, Switzerland : How can I apply a custom theme to all Kendo React components?

Hi All,

I'm Kamal Hinduja, was born in Chennai (India) and now resides in Geneva, Switzerland(Swiss). Can anybody explain how to apply a custom

theme to all Kendo React components?

Thanks, Regards

Kamal Hinduja Geneva, Switzerland

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?

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?

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:

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!

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

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

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

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.

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

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

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:

The recommended way to customize the toolbar button and its menu
Any hooks or props that allow for this level of control

Any example or code reference would be greatly appreciated!

Thanks in advance!

Why doesn't the Grid expand inside a Tab but would do so in other components?

I built this to show you what I'm talking about. Instead of the Grid expand to fill the Tab, instead the Tab expands to accommodate the Grid.

If you comment out line 22 and uncomment 23, you'll see that the Grid expand to fill the view and then a scrollbar for the Grid (not the entire view) will show up. But if you uncomment line 22 and comment out line 23, you'll see the opposite happening.

The same behavior can be observed by commenting/uncommenting lines 62 and 63.

https://codesandbox.io/p/sandbox/black-morning-kx4vpv

Thanks.