KendoReact Forum RSS

Latest Online Resources about KendoReact

16 Mar to 23 Mar 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol
Summary: Learn how to implement the KendoReact SegmentedControl to render a horizontal group of segmented buttons for single (radio-like) selection in React. The guide covers setup and usage with controlled selection (value/onChange), customizing segments (text, icons, disabled state) and appearance (size, rounded, fillMode), plus built-in accessibility and keyboard navigation, with code examples.

Article: https://www.telerik.com/kendo-react-ui/components/grid/grouping/sticky-group-headers
Summary: Use this guide to enable and configure sticky group headers in the KendoReact Grid so the active group header stays pinned at the top while you scroll, including with multi-level grouping. It walks you through the required Grid setup, options for customizing group header content, and notes on behavior and limitations with virtualization, locked columns, and horizontal scrolling.

Article: https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/appearance
Summary: This article shows how to style the KendoReact SegmentedControl using the fillMode, themeColor, size, and rounded props, and how these options affect the segment buttons under the active Kendo theme. You’ll see code examples for configuring text or icon segments, as well as how appearance behaves for selected and disabled items.

Article: https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/layout-mode
Summary: Use this guide to configure the KendoReact SegmentedControl layout mode: render segments horizontally or vertically and control sizing and spacing. It shows the relevant component props with code examples for orientation, stretch/full-width layouts, and responsive behavior so you can implement the exact layout you need.

Article: https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/custom-rendering
Summary: This article shows how to customize KendoReact SegmentedControl items using the itemRender prop so you can replace the default segment content with your own React elements. You’ll render icons or custom layouts, apply conditional styles based on selected/disabled state, and bind to data item fields (for example, text and icon) while preserving accessibility and keyboard behavior.

Article: https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/keyboard-navigation
Summary: Learn the KendoReact SegmentedControl keyboard interactions: use Tab to focus the control, Arrow keys (Left/Right or Up/Down based on orientation) to move between segments, Home/End to jump to the first/last segment, and Enter/Space to select the focused segment. The component uses roving tabindex, skips disabled items during navigation, and confines Arrow/Home/End movement within the control while Tab/Shift+Tab move focus in and out.

Blog: https://www.telerik.com/blogs/great-react-grid-off-kendoreact-vs-mui-vs-ag-grid
Summary: This head-to-head React data grid comparison (KendoReact Grid vs MUI Data Grid vs AG Grid) evaluates feature depth—sorting, filtering, grouping, aggregation, editing modes, virtualization, tree/pivot, and server-side row models—plus performance at scale, API/TypeScript ergonomics, accessibility, theming, and licensing. It shows you when to pick each: use AG Grid if you need pivoting and server-side data models, MUI Data Grid for Material UI apps with straightforward requirements, and KendoReact for built-in data operations and flexible cell/column customization.

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

25 Feb to 04 Mar 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/chart-classification-banners
Summary: Learn how to add top and bottom security classification banners (for example, UNCLASSIFIED, CUI, SECRET) to a KendoReact Chart using React markup and CSS. You wrap the Chart in a container, render configurable banner elements with color-coded styles that stay aligned on resize, and include the banners in exports/prints using the KendoReact PDFExport utilities.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/upload-position-drop-zone-hint-next-to-button
Summary: Learn how to place the KendoReact Upload drop-zone hint inline with the “Select files” button instead of below it. The article shows wiring an external UploadDropZone to the Upload via dropZoneRef and arranging both elements side by side with flexbox/CSS, effectively replacing the built-in hint while preserving drag-and-drop behavior and accessibility.

Blog: https://www.telerik.com/blogs/introduction-tanstack-db-reactive-data-layer-modern-web-applications
Summary: Learn what TanStack DB is and how to use it: a client-side reactive data layer that lets you define a typed relational schema (tables, relations, indexes) and compose derived queries that keep your UI in sync. You’ll model entities, perform joins, and integrate with React, and you’ll see how TanStack DB complements TanStack Query by handling normalized client state while TanStack Query focuses on server-state fetching and caching.

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

09 Feb to 16 Feb 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-react-ui/components/buttons/smartpaste
Summary: Learn how to enable and configure Smart Paste in KendoReact Buttons components that accept text input (for example, Chip/ChipList-based inputs) so pasted clipboard text is parsed into tokens and turned into chips/items automatically. Configure delimiters and parsing rules, enforce validation and de-duplication, and hook into paste handling to sanitize or reject invalid values, with examples showing edge cases like trimming, empty tokens, and max item limits.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/troubleshooting
Summary: Use this KendoReact AI Tools troubleshooting guide to diagnose and fix integration issues with OpenAI or Azure OpenAI, including missing or invalid API keys, wrong endpoints or deployments, 401/403/429 errors, rate/token limits, and CORS. It explains how to route requests through a server to protect secrets and avoid CORS, configure environment variables in React/Next.js/Vite, enable or fall back from streaming (SSE) based on runtime support, and verify model, region, and deployment settings. Follow the steps to capture provider errors and request/response payloads and restore stable AI responses in your app.

Article: https://www.telerik.com/kendo-react-ui/components/buttons/smartpaste/events
Summary: This article documents the SmartPaste events in KendoReact Buttons and shows how to wire them into your components. It explains when each event fires and what its arguments contain so you can access parsed clipboard items, update application state, cancel default behavior, and handle errors during clipboard operations.

Article: https://www.telerik.com/kendo-react-ui/components/conversationalui/promptbox
Summary: Learn how to use the KendoReact Conversational UI PromptBox to capture user prompts or messages in React chat and LLM interfaces. The article shows how to install and render the component, manage controlled input with value/onChange, handle submission via onSubmit or the Enter/Send actions, and customize the UI (placeholder, size, disabled state, and action buttons), including integration with the Chat component.

Article: https://www.telerik.com/kendo-react-ui/components/grid/smart/semantic-search
Summary: This article shows you how to add semantic (natural-language) search to the KendoReact Grid by defining which columns are searchable and wiring a backend that uses an LLM/embeddings to translate a user prompt into Kendo Data Query descriptors (filters, sorts) the Grid can apply. It covers client- vs. server-side data operations, field weighting and prompt customization, and provider setup and security (e.g., OpenAI/Azure).

Article: https://www.telerik.com/kendo-react-ui/components/grid/smart/ai-service-setup
Summary: This article shows you how to configure the AI service that KendoReact Grid Smart features use: choose a provider (OpenAI, Azure OpenAI, or a custom endpoint), set API credentials and model options, initialize the service, and expose it to your React app so the Grid can call it. It covers environment variables, optional server-side proxying to keep keys off the client and handle CORS, and wiring the configured service into the Grid so Smart prompts and natural-language actions run correctly.

Article: https://www.telerik.com/kendo-react-ui/components/buttons/smartpaste/appearance
Summary: This article shows how to control the appearance of the KendoReact SmartPaste button using the same props as Button—themeColor, fillMode, size, rounded, and icon/svgIcon (including icon-only or text-with-icon configurations). You’ll also see how to apply custom styles via className/style and theme variables so the SmartPaste button matches your design system and Kendo themes.

Article: https://www.telerik.com/kendo-react-ui/components/grid/smart/ai-toolbar-assistant
Summary: This article shows you how to add and configure the KendoReact Grid AI Toolbar Assistant to accept natural-language instructions and translate them into grid operations such as sorting, filtering, grouping, aggregations, and column visibility changes. You connect the assistant to your LLM backend via a request handler, provide column/field metadata for schema-aware prompts, and handle events to apply or customize the resulting Grid state, with required packages and code examples included.

Article: https://www.telerik.com/kendo-react-ui/components/updates/breaking-changes/14-0-0
Summary: Use this KendoReact 14.0.0 breaking changes guide to migrate your code: it lists per-package and per-component API removals and renames, behavior changes, and theme/CSS variable or class updates, along with the required actions to update your app. Review only the components you use, then update imports, props/events, TypeScript types, styles/themes, and project dependency versions to meet the new requirements.

Article: https://www.telerik.com/kendo-react-ui/components/buttons/smartpaste/configuration
Summary: Learn how to configure the KendoReact Buttons SmartPaste component to read the clipboard on click and emit a normalized payload (text, HTML, images, files). The article covers accepted MIME types and priority, size limits and HTML sanitization, the fallback paste dialog for browsers without full Clipboard API support, event handlers such as onPaste and onError, and relevant Button props for appearance and accessibility.

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

02 Feb to 09 Feb 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/react-basics-memoization-react
Summary: Learn when and how to use React memoization—React.memo, useMemo, and useCallback—to prevent unnecessary re-renders and expensive recalculations in components and child props. You’ll see how referential equality affects prop comparison, how to choose correct dependency arrays to avoid stale closures, the trade-offs and pitfalls (inline object props, custom comparators), and how to profile to confirm real performance gains.

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

29 Jan to 05 Feb 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/react-basics-memoization-react
Summary: Use useMemo, useCallback, and React.memo to reduce unnecessary React re-renders by caching expensive computations and stabilizing function and object identities. The article explains when memoization is actually effective, how dependency arrays and referential equality influence updates, and how React.memo relies on shallow prop comparisons. It also covers pitfalls like stale closures, incorrect dependencies, and premature optimization, providing guidance to target real performance bottlenecks in your components.

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

19 Jan to 26 Jan 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/exploring-ai-powered-kendoreact-smart-grid
Summary: Learn how to integrate an LLM with the KendoReact Grid to create a “Smart Grid” that translates natural-language prompts into concrete behaviors such as filtering, sorting, grouping, computed columns, and data summaries. The article walks you through the React/TypeScript implementation—mapping intents to Grid state, designing prompt templates, calling a server-side LLM endpoint, and validating outputs—along with practical concerns like schema constraints, error handling, and rate/token limits.

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

12 Jan to 19 Jan 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools
Summary: KendoReact AI Tools provides React components for LLM features: AI Prompt to collect user prompts (with optional variables and suggestions) and AI Output to render responses with Markdown, code highlighting, and streaming. You wire these components to your LLM backend (e.g., OpenAI or Azure OpenAI) via props and event handlers, and you can compose them standalone or within an AI Assistance panel layout.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/changelog
Summary: Review the KendoReact AI Tools changelog for a version-by-version record of features, bug fixes, and breaking changes across the AI-related React components. Use it to plan upgrades, verify API and dependency changes, and identify required migration steps in your codebase. Entries are organized by release with component-specific updates and compatibility details.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/installation
Summary: This guide shows you how to set up KendoReact AI Tools in a React app: install the @progress/kendo-react-ai package, import a Kendo theme stylesheet, and activate your KendoReact license. You then configure a secure backend proxy and environment variables for your LLM provider (OpenAI, Azure OpenAI, Anthropic) and point the AI components to that endpoint so API keys stay server-side.

Article: https://www.telerik.com/kendo-react-ui/components/grid/styling/stacked-layout
Summary: Learn how to render the KendoReact Grid in a stacked (label–value) layout on small screens so each row displays vertically for better mobile readability. The article shows how to enable the stacked layout with Kendo theme CSS utilities and responsive breakpoints, include column headers as labels inside cells, and customize spacing and visibility. It also calls out feature compatibility and limitations in stacked mode to help you decide when to switch between table and stacked layouts.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/ai-assistant/getting-started
Summary: This Getting Started guide shows you how to add the KendoReact AI Assistant to a React app: install the KendoReact AI Tools package and styles, wrap your app in the AI context provider, and render the Assistant with message state and handlers. You connect the Assistant to an LLM (OpenAI or Azure OpenAI) through a server-side proxy that holds your API key, enable streaming responses, and wire up send/response/error callbacks. It also outlines basic customization, theming, and security practices so you don’t expose secrets in the browser.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/treelist-multiselect-filter
Summary: Learn how to add a MultiSelect-based filter to a KendoReact TreeList column so users can filter rows by multiple values. The article shows how to create a custom filterCell that renders a KendoReact MultiSelect, populates it with distinct column values, and updates the TreeList filter state by building a CompositeFilterDescriptor (OR of eq operators) via onFilterChange. It covers wiring the filterCell into the column definition, handling clear/reset, and applying client-side filtering for string or numeric fields.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/editor-max-min-character-limit
Summary: Learn how to enforce minimum and maximum character limits in the KendoReact Editor by validating the plain-text length of the content on every change. Handle the Editor onChange event, derive the text content (for example, via EditorUtils.getText), conditionally accept updates to block input beyond the max while allowing deletions and pastes, and display a live counter or Form validator errors for min/max rules.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-change-expand-collapse-arrow
Summary: This article shows how to change the KendoReact Grid’s expand/collapse arrow for hierarchy (detail) rows by rendering a custom expand cell. You create a custom cell that uses your own icons (for example, SvgIcon chevron-right/chevron-down from @progress/kendo-svg-icons), hook it up to the Grid’s expandField and onExpandChange to toggle the detail row, and keep ARIA labels/focus behavior intact.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/treelist-reset-scroll-during-paging
Summary: Learn how to reset the KendoReact TreeList scroll position to the top when changing pages. You’ll attach a ref to the TreeList and, in onPageChange, update skip/take and programmatically set the scrollable content element’s scrollTop (and optionally scrollLeft) to 0 (for example, via treeListRef.current.element.querySelector('.k-grid-content')). This ensures each new page starts at the top regardless of prior scroll state.

Blog: https://www.telerik.com/blogs/kendoreact-internationalization
Summary: Learn how to internationalize your KendoReact app by configuring globalization (date, number, and currency formatting) and localization (component message translations). You’ll load CLDR data with load(), wrap your app with IntlProvider and LocalizationProvider, use loadMessages and useIntl/IntlService to format values, switch locales at runtime, and enable RTL so components render correctly for different languages and regions.

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

05 Jan to 12 Jan 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/building-chatgpt-apps-react-components-introducing-kendoreact-apps-sdk
Summary: Learn how to build a ChatGPT-style chat UI in React using the KendoReact AI Prompt Apps SDK. The article shows you how to wire KendoReact chat/prompt components to OpenAI or Azure OpenAI, handle streaming responses, persist conversation state, manage token usage, and use prompt templates, with end-to-end client and server code. By the end, you can scaffold a working LLM chat, plug in your provider keys and endpoints, and extend it with features like attachments and error handling.

Blog: https://www.telerik.com/blogs/react-basics-thinking-react
Summary: Learn how to think in React by breaking a UI into a component hierarchy, building a static version, identifying minimal state, deciding where state should live, and wiring one-way data flow (state down, actions up). You’ll walk through a filterable product table with controlled inputs to practice lifting state up, deriving computed data instead of duplicating state, and keeping components predictable with props and pure rendering.

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

29 Dec to 05 Jan 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/caching-tanstack-query
Summary: You’ll learn how TanStack Query (React Query) caching works and how to configure it for predictable data freshness: query keys, staleTime vs cacheTime, background refetching, garbage collection, and invalidation. The article walks you through practical APIs and patterns—setQueryData, invalidateQueries, and prefetchQuery—to reduce unnecessary requests, keep list/detail views in sync, and make mutation updates consistent.

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

22 Dec to 29 Dec 2025: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/introduction-zustand
Summary: Learn how to use Zustand for React state management: create a global store with create(set, get), define sync/async actions, and consume state in components via the store hook with selectors. The article covers performance and tooling topics—selectors with shallow equality to avoid unnecessary re-renders, splitting stores into slices, TypeScript typing, and middleware like persist and devtools for state persistence and debugging.

Blog: https://www.telerik.com/blogs/getting-started-kendoreact-localization
Summary: Learn how to set up KendoReact localization and i18n by installing @progress/kendo-react-intl, wrapping your app with IntlProvider and LocalizationProvider, loading translations with loadMessages, and switching locales at runtime. You translate built‑in component messages and enable locale-aware date/number formatting (and optional RTL) so the entire React UI follows the selected language and culture.

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

15 Dec to 22 Dec 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-react-ui/components/cloud
Summary: This guide shows how to integrate KendoReact into cloud workflows and deployments. It covers deploying React apps to Vercel, Netlify, AWS Amplify, and Azure Static Web Apps; configuring builds, environment variables, SSR/Next.js, and CDN asset paths; and connecting components to cloud APIs and object storage (for example, direct uploads to AWS S3 or Azure Blob Storage).

Article: https://www.telerik.com/kendo-react-ui/components/sample-applications
Summary: Explore end-to-end KendoReact sample applications that show how to compose grids, charts, forms, and other components in real React projects. Each app provides a runnable demo and GitHub source with setup details, highlighting patterns for routing, data fetching, state management, theming, and build tooling you can reuse in your codebase.

Article: https://www.telerik.com/kendo-react-ui/components/installation/requirements
Summary: This page lists the KendoReact prerequisites you must meet before installation: supported React versions (16.8+ with hooks, including React 18), peer dependencies (react and react-dom), compatible Node.js/npm, and supported evergreen browsers (Chrome, Firefox, Safari, Edge; Internet Explorer is not supported). It also covers project setup expectations (ES module bundling with webpack, Vite, or Create React App, and importing a Kendo theme stylesheet) and the Kendo UI license requirement for @progress/kendo-react-* packages. Use this checklist to confirm your environment and avoid install or runtime issues.

Article: https://www.telerik.com/kendo-react-ui/components/grid/smart/ai-chat-assistant
Summary: Shows how to add and configure the AI Chat Assistant for the KendoReact Grid so users can query and manipulate grid data in natural language (for example, apply filters, sort, group, or show/hide columns). Covers wiring the assistant to an LLM through your server (OpenAI or Azure OpenAI), providing column metadata, and handling callbacks that translate chat intents into Grid state updates, with options to control prompts and allowed actions.

Blog: https://www.telerik.com/blogs/automating-complex-workflow-nextjs-application-inngest
Summary: Learn how to integrate Inngest into a Next.js (App Router) app to orchestrate reliable background jobs and multi-step workflows. You’ll set up the Inngest client and /api/inngest route, define event-driven functions with durable steps (retries, delays, wait-for-event, parallelization), trigger events, run locally with the Inngest Dev Server, and apply patterns for scheduling, idempotency, concurrency controls and failure handling.

Blog: https://www.telerik.com/blogs/kendoreact-speechtotextbutton-component
Summary: Explains how to add speech recognition to KendoReact inputs with the SpeechToTextButton component, which uses the browser Web Speech API for speech-to-text. It shows installation and integration with KendoReact TextBox and other inputs, start/stop control, handling result/error events, configuring language and recognition options, and browser/permission constraints. It also outlines React state management and accessibility considerations when embedding the button in existing UI.

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

01 Dec to 08 Dec 2025: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/kendoreact-prompt-library
Summary: This article introduces the KendoReact Prompt Library: a set of copy‑paste prompts you can use with LLMs (e.g., ChatGPT, GitHub Copilot) to generate and refactor KendoReact code for tasks like building a Grid or Chart, wiring data and forms, theming, TypeScript typing and accessibility. It explains how to structure effective prompts—clearly stating the task, React/KendoReact versions, constraints and expected output—so LLMs return reproducible, version‑correct components and migrations you can adapt to your project.

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

24 Nov to 01 Dec 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/scrollview-lightbox
Summary: Learn how to implement a lightbox-style image viewer with the KendoReact ScrollView by opening the clicked item in an overlay and synchronizing the active index via ScrollView events. You manage React state for open/close and current index, wire item click and keyboard handlers (ArrowLeft/ArrowRight for navigation, Escape to close), and add minimal overlay styles to create a modal image gallery.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-pdfexport-show-message
Summary: Show a loading message while exporting a KendoReact Grid to PDF with the PDFExport component by toggling React state during the async export process. Use a useRef to access PDFExport and wrap pdfExportRef.current.save() in an async handler that sets a “busy” flag before the call and clears it in then/finally to hide the message when the export completes. The example wires the export to a toolbar button and renders a simple overlay to keep users informed.

Blog: https://www.telerik.com/blogs/kendoreact-mcp-server-cursor
Summary: This article shows you how to integrate the KendoReact MCP (Model Context Protocol) server with the Cursor editor so you can query KendoReact documentation and code examples directly in your IDE. It covers installing the MCP server, configuring Cursor to connect to it, and using the provided tools to retrieve component APIs, props, and usage snippets, with notes on troubleshooting common setup issues.

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

17 Nov to 24 Nov 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-react-ui/components/ai-components
Summary: Use the KendoReact AI Chat and AI Prompt components to implement LLM-based chat and prompt UIs in React. The article shows how to connect these components to OpenAI or Azure OpenAI backends, model messages and roles, stream responses, handle send/receive events, and integrate with your server endpoints. It provides configuration guidance and code examples to wire the components into your application.

Article: https://www.telerik.com/kendo-react-ui/components/styling/custom-css-styles
Summary: Learn how to override KendoReact component styles with custom CSS by targeting the library’s k-* class names and structural parts, and by controlling selector specificity and stylesheet load order. The guide shows how to use className and style props, work with CSS Modules (including :global), and create maintainable selectors to style components and states without relying on !important. Use the examples for Buttons, Inputs, Grid, and similar widgets as patterns for scoping overrides safely.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/ai-assistant/changelog
Summary: Use this changelog to track versioned updates to the KendoReact AI Assistant, including release dates, features, fixes, deprecations, and breaking changes. For each release, it details API and configuration changes (props, events, models) and any migration steps so you can plan upgrades and validate compatibility with your LLM integration.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/agentic-ui-generator/changelog
Summary: Use the KendoReact AI Tools Agentic UI Generator changelog to track release notes for each version, including new features, bug fixes, and breaking changes. Refer to it when planning upgrades and migrations, auditing API or behavior changes, and keeping your React integration compatible and stable.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/agentic-ui-generator/prompt-library
Summary: This article documents the KendoReact AI Tools Agentic UI Generator Prompt Library—the built-in, task-focused prompts that drive React UI generation with KendoReact components. It shows you how to select, inspect, and customize prompts (templates, variables, constraints) and how to add your own entries to the library to produce consistent, reproducible code in your projects.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/agentic-ui-generator/getting-started
Summary: Set up the KendoReact Agentic UI Generator by installing the CLI via npm, configuring your OpenAI API key, and pointing it at your existing React project. Run the generator to create KendoReact pages and components from task prompts, then iterate by reviewing the output, refining prompts, and adjusting settings to match your app’s structure and coding standards.

Article: https://www.telerik.com/kendo-react-ui/components/knowledge-base/chart-wizard-use-state-with-chart
Summary: Learn how to drive a KendoReact Chart from React state inside a Wizard, updating chart type, series, categories, and data as users move between steps. You wire useState and onChange handlers to propagate changes to Chart props and ensure a correct re-render/resize when the Chart becomes visible (for example, via a ref to call refresh or by changing a key to force remount). Use this pattern to build step-by-step chart configuration UIs without mutating Chart internals.

Blog: https://www.telerik.com/blogs/turn-prompts-pages-telerik-agentic-ui-generator
Summary: Learn how to use the Telerik Agentic UI Generator to turn natural-language prompts into scaffolded UI pages with Telerik/Kendo UI components. You’ll choose a target stack (Blazor, Angular, React or Vue), describe layout, data and actions, iterate on the prompt, then export code and integrate it with data binding, forms, grids and charts. The article covers setup, prompt patterns and limitations, and advises reviewing and adjusting the generated code before shipping.

Blog: https://www.telerik.com/blogs/react-basics-interactivity-state
Summary: This article shows you how to add interactivity in React by handling events (onClick, onChange) and managing component state with useState. You’ll build controlled inputs, conditional UI, and share state via lifting state and callbacks passed through props, while following immutable updates and functional setState to avoid bugs. By the end, you can wire user input to state and understand how state changes trigger re-renders.

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

10 Nov to 17 Nov 2025: highlights of the new online resources that we published last week.

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.

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

29 Oct to 05 Nov 2025: highlights of the new online resources that we published last week.

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.

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

20 Oct to 27 Oct 2025: highlights of the new online resources that we published last week.

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.

TaskBoard drag-and-drop causes crash and multiple UI glitches

While testing the TaskBoard component , I encountered several issues: (1) simply dragging cards sometimes causes a crash with Cannot convert undefined or null to object, (2) during drag-and-drop the bottom of the board flickers, (3) a horizontal scrollbar appears inside columns unexpectedly, and (4) cards sometimes disappear or leave visual artifacts (ghosts/shadows) while dragging between columns), and (5) in some cases cards get stuck and it becomes impossible to replace or move them; all of this happens with minimal/default setup, suggesting problems in internal drag-and-drop or state handling.

1.
2.

3.

4.

Tabstrip order - Drag to Reorder

There is functionality in kendo asp.net tabstrip for drag to order.
How can we achieve same for kendoreact

Custom Date-Range FilterCell renders incorrectly when two date columns are adjacent

Hi,

I am trying to implement in-grid date-range filtering using a custom filterCell in KendoReact Grid.

Context:
I followed the Knowledge Base article:
React Create a Date-Range Filter in the Grid - KendoReact

I adapted the example to my project and used a custom filterCell for date-range filtering.
However, I noticed an issue:

When two or more columns with the same custom date filter cell are adjacent, the filter UI of the neighboring columns is rendered inside the first column's filter cell.

Example:
app.jsx - nodebox - CodeSandbox
When column order is: [text, text, date, date, text] - The filter UI of both date columns is rendered inside the first date column.
When I change the order to: [text, text, date, text, date] - The filters render correctly and independently.

Thank you.
Bohdan

How to find my exact package ID

I recently signed-up for the Telerik® UI for ASP.NET Core Trial

I was able to get the API Key

However I'm getting an VSCode Error with this package name: Telerik.UI.for.AspNet.Core.Trial

Is there a common package name?

How can I find the package name for my account?

Is there any abillity to add resize for components with popup?

Can we add resize width and height for those components which has popup. With props popupSettings in dropdown, multiSelectTree etc. add resize.

MinHeight and minWidth don't work in Window props

When I use minHeight and minWidth for window these props just don't work, even I add these props for inline style in Window component.

How to use prop 'url' in PDF viewer

Hello!

I'm using KendoReact PDFViewer and I've encountered a problem with the URL prop not working with regular HTTP URLs, for example:

<PDFViewer url="https://example.com/sample.pdf" />

The PDF simply won't load.

Please help:

In what cases does the URL prop actually work in PDFViewer?

First tree level parent items are not highlighted in ContextMenu

Hi!

Is there any reason why element with XXX text is not highlighted just as other elements in 'opened hierarchy'?

Thanks!
Bohdan

KEndoGrid: After toolbar filter/search state update, an in-cell editor (NumericTextBox) sometimes auto-focuses

Hi Team,

We have a KendoReact Grid where (effectively) all rows are in edit mode (we set edit so each valid item is editable). One of the editable columns uses a custom edit cell that renders a NumericTextBox (quantity).

We also have a toolbar with an Input used to search/filter products. The toolbar Input onChange is debounced (lodash debounce), and on each debounced change we update the Grid filter/state.

Problem: when the debounced toolbar Input triggers a state update and the Grid re-processes data and re-renders rows, SOMETIMES one of the quantity NumericTextBox inputs auto-focuses. This steals focus from the search input while the user is still typing. The user then unknowingly continues typing, but now their keystrokes go into a quantity cell instead, causing incorrect quantities / incorrect lines ordered.

This is a serious UX/data integrity issue because users can accidentally edit quantities while they intend to keep typing the product search.

Expected Behaviour
When the user is typing in the toolbar search Input, focus should remain on that Input across Grid state changes (sorting/filtering/paging), and no cell editor should automatically take focus unless the user explicitly clicks into a cell or we explicitly programmatically focus it.

Source
I've tried to duplociate the error using a simplistic kendo example without luck but I've included the LineItemsGrid, LineItemsToolbar and the QuantityEditCell in this stackBlits for ref, see `MyFiles`. Note that this is NOT a working demo. There is just too much going on contextually to make a static working demo.

https://stackblitz.com/edit/react-2bkcpcjg?file=MyFiles%2FQuantityEditCell.tsx,MyFiles%2FLineItemsToolbar.tsx,MyFiles%2FLineItemsGrid.tsx
Any advise or way to tweak out where the bug could be would be helpful.

Thanks,
Grant

Adding items to the Grid with fixedScroll causes the Grid to become unresponsive after scrolling

1. Scroll down a bit so that skip is != 0

2. Add a new item to the start of the list

3. Scroll up, the Grid becomes blank.

Repro: https://stackblitz.com/edit/react-jqcvjbpj

Grid resizable is not working when using tooltip

Hi,

I noticed that grid column becomes not resizable when using tooltips in grid, even if thProps are passed.

I edited stackblitz of this official example:
React Render Tooltips for Grid Cells - KendoReact

got:
myEditedExample

Is it a bug or am I missing something?

Thanks,
Bohdan

Grid locked custom column

Hi,

I am looking for a solution for locked custom column and I bumped into some example, but seems like it's already outdated and not working anymore at least due to missing 'cell' property in GridColumn component and missing tdProps in GridCellProps interface.

Is there any chance to bring the example up-to-date?
or are there any fresh articles/knowledge-base related to this problem?
example

related post here:
related forum post

Thanks,
Bohdan

How can I optimize TaskBoard performance?

Hello.

After adding 150-200 cards UI starts to lag.

What are the best practices to optimize KendoReact TaskBoard performance with a large number (e.g. 500+) of cards?

Thanks.

[Grid] Inline editing - strange re-focus when single line is being edited

We have a strange issue with the newest Grid component. I have this issue recreated here: https://codesandbox.io/p/devbox/proud-forest-v49cp6

The upper most input element is just to trigger state change. To see the issue:

Click on Edit in any row in the grid to start inline editing of that row
Start typing in the upper most input field (above the grid)
After each letter the Grid will get focus preventing me from writing in the input!!!

Now if I enable editing in two rows at once (two rows are in edit state) this behavior is absent and I can normally type in my input above the grid. What is wrong?

Grid last column drag-n-drop grouping gets stuck

Hi,

If Grid's last column has a long title, trying drag-n-drop to group that last column will get stuck. The mouse cursor's title box is too wide, it overflows to outside of the grid, then the cursor can't be moved anymore.

To reproduce, use this example - https://www.telerik.com/kendo-react-ui/components/grid/grouping, resize the browser to a smaller size so that "Category Name" column title fill up the entire column width. Then try to drag "Category Name" column.

Please see the attached screenshot too.

Thanks,

Jie

How to customise the GridToolbarColumnsChooser options

Hi Team,

I want to use the `GridToolbarColumnsChooser` in the Grid Toolbar (example) but there isnt any obvious way to customize the selectable visible/columns. In my use case, not all columns can be hidden, but there is no control in this component to do so.

I see there is a GridColumnMenuColumnsChoose, which accepts a single 'column' property, not sure if this is intentional, or maybe this is not what im looking for?

Anyway, any help to be able to customize the list of selectable columns would be helpful.

Thanks,
Grant

Warnings in KendoTheme

I am getting the following WARNINGS

$_default-colors: $kendo-colors

from

node_modules/@progress/kendo-theme-bootstrap/scss/core/_index.scss 23:5 @forward

$_default-elevation: $kendo-elevation,

$_default-font-sizes: $kendo-font-sizes,

I am giving only some examples. Is there a way to fix these warnings.

Please help

Thank you

Multiselect header/footer

Hi Telerik Team,

How can I force on header/footer click to not to close a dropdown?
I want "Select All" to be a part of header, not to be a part of list of items as mentioned here:
https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-hfkoyn?file=app%2Fmain.jsx

Btw, this (if all dependencies updated) doesn't work anymore:
https://stackblitz.com/edit/react-7vxshz-mo7jrl?file=app/main.jsx

Regards,
Bohdan

Uncontrollable spacing in grouped rows of KendoReact Grid

In KendoReact Grid, when using grouping with multiple hierarchy levels, the Grid automatically adds extra horizontal space inside the <td> elements (indentation for group levels).

Technically this makes sense, because each group level needs visual offset.
However, the problem is that there is no built-in way to control or configure this spacing.

As a result:

extra empty space appears inside <td> cells
the Grid content becomes wider than expected
this breaks layout and design, especially in custom UI / strict design systems

Why doesn’t KendoReact Grid expose any API or configuration to control this indentation / spacing for grouped rows?

Is there:

an official way to customize or limit this space?
a recommended approach to override or manage this behavior without breaking Grid internals?

Any guidance or best practices would be appreciated.

Example:

Uncontrollable spacing in grouped rows of KendoReact Grid

In KendoReact Grid, when using grouping with multiple hierarchy levels, the Grid automatically adds extra horizontal space inside the <td> elements (indentation for group levels).

Technically this makes sense, because each group level needs visual offset.
However, the problem is that there is no built-in way to control or configure this spacing.

As a result:

extra empty space appears inside <td> cells
the Grid content becomes wider than expected
this breaks layout and design, especially in custom UI / strict design systems

Why doesn’t KendoReact Grid expose any API or configuration to control this indentation / spacing for grouped rows?

Is there:

an official way to customize or limit this space?
a recommended approach to override or manage this behavior without breaking Grid internals?

Any guidance or best practices would be appreciated.

Example:

Hide expand icons for non child rows.

I’m using Kendo React v12 and expanding rows with detailExpand. Some rows don’t have child data. How can I hide the expand icon for rows that have no child rows?”

Can I render a Grid without the header row?

Hi team,

As the title says, I have a use case where I want to render a Grid without the Header Row. My use case is i want to easily display a small grid (2 columns) and the header row is unnecessary and takes up space, the data speaks for itsself.

I tried to use the rows.data attr to conditionally ignore the header row, but it turns out that rows.data only executes for the data rows (obviously) and the only other optiosn are groupHEader and groupFooter.

Can you help at all?

Thanks,
Grant

Context Menu Assign Target?

How do you assign a target div tag for the context menu. I'm creating the menu as a component to add to an application and need to assign the target to popup the menu,

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!