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

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

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

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

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:

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

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;

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

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