Kendo UI for jQuery Forum RSS

Latest Online Resources about Kendo UI for jQuery

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/multiselect-bold-matched-text-filtering
Summary: Learn how to bold the matched filter text in Kendo UI for jQuery MultiSelect items by combining a custom item template with the filtering/dataBound events. You implement a safe highlighter that HTML-encodes the item text, escapes the search term with kendo.util.escapeRegex, and wraps matches in , so the dropdown updates the highlighting as the user types.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/submitting-filled-pdf-forms-kendo-ui-jquery-pdfviewer
Summary: Learn how to submit a filled PDF form from the Kendo UI for jQuery PDFViewer to your server instead of downloading it. The article shows how to intercept the viewer’s download/submit action, export the currently displayed PDF with the AcroForm field values applied as a Blob/ArrayBuffer, and upload it via AJAX/fetch (e.g., application/pdf or multipart/form-data). Use this pattern to persist filled forms, validate server-side, or store the finalized PDF.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/diagram/tooltips
Summary: Learn how to add and customize tooltips for Kendo UI for jQuery Diagram by initializing kendoTooltip on the diagram element and targeting shapes and connections with a filter selector. Use the content callback or templates to render dynamic text from the hovered shape/connection data item, and configure behavior with options like position and autoHide plus show/hide events. Examples demonstrate how to detect whether the target is a shape or connection and access its model to display relevant information.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/diagram/connections
Summary: Learn how to configure, create, and manage Kendo UI for jQuery Diagram connections, including using connections options, binding via from/to fields in a connections data source, and creating links programmatically with the Diagram API. You will pick source/target connectors, control routing (orthogonal or polyline), customize caps, labels, and stroke styling, and enable user editing, selection, and constraints for valid linking.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/custom-builder-cli
Summary: This article shows you how to use the Kendo UI for jQuery Custom Builder CLI to generate a custom JavaScript and CSS bundle that includes only the widgets you select, with optional theme, RTL, and localization assets. It covers prerequisites and license activation, installation and commands (interactive or config-driven), build options and outputs, and how to integrate the generated files into your project and CI/CD, including rebuilding against a specific Kendo UI version.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/diagram/accessibility/key-nav
Summary: This article documents the Kendo UI for jQuery Diagram keyboard navigation so you can implement and test accessible interactions. It covers how to focus the widget; navigate between shapes and connectors; select and multi-select; move selected items with the keyboard; start and cancel text editing; and delete items, listing the supported keys and modifiers (Tab/Shift+Tab, arrow keys, Enter/Space, Esc, and combinations) and the expected behavior for each.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/diagram/accessibility/overview
Summary: This article documents the Kendo UI for jQuery Diagram accessibility support and limitations, including WAI-ARIA semantics (if any), keyboard navigation behavior, and how the component maps to WCAG 2.2 AA and Section 508 requirements. It explains the implications of SVG-based rendering for screen readers and provides guidance on focus management, labeling, and alternative descriptions so you can implement, test, and provide accessible or fallback experiences where needed.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/node-setup-windows-nvm
Summary: Set up Node.js on Windows using nvm-windows so you can run Kendo UI for jQuery build and CLI tools. The article walks you through installing nvm, installing and switching between LTS Node versions (nvm install/use), setting a default, and verifying node and npm are correctly on your PATH. It includes practical commands and checks to manage multiple Node versions reliably on Windows.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/maintain-selection-position-kendo-ui-jquery-multiselect
Summary: Learn how to maintain the position/order of selected items in the Kendo UI for jQuery MultiSelect so they follow the DataSource order instead of the order in which users select them. You’ll hook into select/deselect (or change) events, compute each selected item’s index in dataSource.view(), sort the value array accordingly, and call value() to keep tag order and dropdown state consistent during filtering, sorting, and virtualization.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/create-rounded-corners-column-chart-bars-kendo-ui-jquery
Summary: This article shows you how to add rounded corners to Kendo UI for jQuery Column/Bar Chart bars by overriding seriesDefaults.visual and drawing rounded rectangles with the Kendo Drawing API. It provides a reusable visual function that preserves series colors and borders, rounds only the top edges for positive values (bottom for negatives), supports clustered and stacked series, and retains tooltips, hover, and export behavior.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/adjusting-hover-effect-darker-colors-kendo-ui-jquery-charts
Summary: This article shows how to customize the Kendo UI for jQuery Chart hover highlight so dark-colored series don’t get darker and lose contrast. You’ll override the default behavior via seriesDefaults.highlight (using the toggle callback or a custom highlight visual) and compute a lighter fill/stroke from the series color to apply on hover. The approach works across common series types (e.g., bar/column/line) and relies on kendo.drawing color utilities to adjust brightness and opacity.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/tooltip-extra-text-jquery-chart
Summary: This article shows you how to add extra text to Kendo UI for jQuery Chart tooltips by customizing the tooltip template or using a content callback. You access the current point’s e.category, e.value, e.series, and e.dataItem (or switch series.data to objects like { value, category, unit }) to pull custom fields and return a formatted string with the additional context. It also notes how to handle cases where your data is plain numbers versus objects.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/bell-alert-icon-telerik-components
Summary: Learn how to add a notification bell with an unread count or dot badge in Kendo UI for jQuery by combining a bell icon with the Badge widget/utilities and minimal CSS, wrapping them in a k-badge-container for proper overlay. The article provides jQuery-ready markup for both SVG and font icons and shows how to embed the pattern in buttons, toolbars, and other component templates.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/tooltip-on-disabled-button-aspnetcore
Summary: To display a Kendo UI Tooltip on a disabled Button in ASP.NET Core, attach the Tooltip to a wrapper element instead of the disabled button, because disabled elements do not fire hover/mouse events. Wrap the button, optionally set CSS pointer-events: none on the button, and initialize the Tooltip on the wrapper using a filter and content function (and showOn hover) so the tooltip reliably appears only when the button is disabled.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/copying-events-kendo-ui-jquery-scheduler
Summary: Learn how to implement event duplication in the Kendo UI for jQuery Scheduler by detecting a modifier key (for example, Ctrl) during drag and handling the Scheduler moveEnd event to clone the original appointment and add a new one via dataSource.add at the drop slot with the same duration, allDay flag, and resource values. You’ll also cancel the default move to keep the source event in place and account for details like computing new start/end times from the target slot and handling recurring events.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/maskedtextbox-unmaskonpost-ajax-grid-editing
Summary: Learn how to send unmasked values from a Kendo UI for jQuery MaskedTextBox when editing a Grid via AJAX. The article explains that the UnmaskOnPost option applies only to form posts, not to AJAX-bound Grid requests, and shows how to unmask on the client by using a custom editor and DataSource.transport.parameterMap (or Grid edit/save events) to strip mask literals before the data is sent to the server.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/correcting-reorder-issue-listbox-kendo-ui-jquery
Summary: Learn how to diagnose and fix unexpected reordering in the Kendo UI for jQuery ListBox (items jumping to the wrong position or order reverting) when using drag and drop. You will synchronize the UI with the underlying DataSource by handling the drop/reorder workflow, programmatically removing and inserting items at the target index, and ensuring no active sort/filter or duplicate value fields interfere with the final order.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/smart-grid
Summary: This article explains how to enable and configure Smart Grid mode in the Kendo UI for jQuery Grid so the component adapts its layout and UI to available space and interaction context. It covers setup, options, and constraints, including how Smart mode affects the toolbar, column menu and filtering UI, paging/scrolling, virtualization, and server-bound data operations.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/promptbox/modes
Summary: This article explains the Kendo UI for jQuery PromptBox modes and how they change rendering, interaction, and the value the component returns. You learn how to set the mode via configuration and the API, choose the right mode for your use case, and work with code examples that show initialization, value binding, and event handling.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/promptbox/tools
Summary: This article shows you how to configure the Kendo UI for jQuery PromptBox tools: add built-in items and custom buttons, control order and placement in the header or footer, set icons/text, and attach click handlers. It details the tools configuration syntax with examples for defining buttons and separators, enabling/disabling or hiding items, and handling tool events to implement actions like sending or clearing the prompt.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/promptbox/events
Summary: Learn how to handle Kendo UI for jQuery PromptBox events and subscribe to them via configuration or the bind API. The article covers lifecycle events (such as open and close) and user-action events, outlines the event arguments (for example, which button was clicked and the current input value), and shows how to read the input, react to actions, and optionally prevent closing for validation. Use the examples to implement validation, logging, and custom control flow around PromptBox interactions.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/promptbox/disabled
Summary: This article explains how the disabled state applies to the Kendo UI for jQuery PromptBox. The PromptBox is a modal utility and does not expose a disabled state or an enable/disable API—you can only open or close it. If you need to block interaction (e.g., disable inputs or buttons), control when you invoke the PromptBox or use a Kendo Dialog where you can manage individual elements.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/promptbox/overview
Summary: Use the Kendo UI for jQuery PromptBox to collect a single user input in a modal dialog, configuring the title, message, input field (placeholder and default value), and OK/Cancel actions. The overview shows how to initialize the PromptBox with jQuery, wire up events to handle the user response, and control it through its methods (for example, open and close) with concise code examples.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/promptbox/adornments
Summary: This article shows you how to configure PromptBox input adornments in Kendo UI for jQuery to add prefix and suffix elements such as icons or custom content around the prompt input. It explains how to combine multiple adornments before/after the input and outlines how adornments interact with component sizing, RTL, and theming to preserve layout and accessibility. Useful keywords: PromptBox adornments, prefix, suffix, icons, custom content, Kendo UI for jQuery, configuration.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/promptbox/appearance
Summary: Learn how to control the appearance of the Kendo UI for jQuery PromptBox using the built‑in Sass themes (Default, Bootstrap, Material) and the common styling API (size, rounded, fillMode, themeColor). You’ll see how to include and switch themes and swatches, use ThemeBuilder, and override Sass variables or component CSS selectors to customize the dialog, input field, and action buttons consistently.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/smartpastebutton/events
Summary: This article documents the Kendo UI for jQuery SmartPasteButton events and shows how to subscribe to them via the widget API or jQuery. It explains the event sequence and available arguments (including the pasted payload and metadata like content type and original DOM event), how to call preventDefault to override the default handling, and how to implement success and error handlers for different paste scenarios. Code examples illustrate binding/unbinding and accessing event data to route pasted content into your custom logic.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/smartpastebutton/overview
Summary: Learn how to initialize and configure the Kendo UI for jQuery SmartPasteButton to read clipboard content and paste it as sanitized text or HTML into a target element. You’ll set paste mode and content filtering options, handle paste-related events to inspect or transform data, and call the component’s API methods from your code.

Blog: https://www.telerik.com/blogs/jquery-4-support-whats-new-how-kendo-ui-has-you-covered
Summary: Learn what changes in jQuery 4 affect real apps—removal of long‑deprecated APIs (event shorthand methods, .andSelf, .bind/.delegate) and other tightened behaviors—and how they impact Kendo UI for jQuery widgets. The article lists which Kendo UI versions support jQuery 4 and provides a practical upgrade path: update to a supported Kendo UI release, move to jQuery 4, use jQuery Migrate to surface deprecations, replace deprecated calls, and re-test components.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/dynamically-setting-step-value-kendo-chart-labels
Summary: Learn how to dynamically set axis label intervals in Kendo UI jQuery Charts by computing and applying categoryAxis.labels.step (and valueAxis.labels.step) at runtime. The article shows using render/resize events to calculate a step based on chart width and category count, then updating the chart via chart.setOptions to prevent label overlap.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/preventing-unsaved-changes-grid-filtering-searching
Summary: Explains how to prevent data loss from unsaved edits in a Kendo UI for jQuery Grid when users filter or use the toolbar search. You intercept filtering/searching (Grid filter/dataBinding events and the SearchBox), detect dirty state with dataSource.hasChanges() or an active edit row, then cancel the operation, prompt to save or discard, and optionally call dataSource.cancelChanges() before proceeding.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/chart-shading-between-lines
Summary: Learn how to shade the area between two line series in a Kendo UI for jQuery Chart by adding a rangeArea series whose data points use the per-category min/max (from/to) values from the two lines. The article shows how to compute the range dataset, align categories, configure color/opacity and borders, and preserve the original line series and tooltips so the filled band accurately follows intersections and crossings.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/export/excel-export-customization
Summary: Configure the Kendo UI for jQuery Grid excel options (fileName, allPages, filterable, proxyURL, forceProxy) to control the export scope and the generated .xlsx file. Handle the excelExport event to access e.workbook (kendo.ooxml.Workbook) and programmatically modify the workbook—add/remove rows and columns, set number formats and cell styles, adjust column widths, merge cells, and customize headers/footers—before saving. You can also include or exclude hidden columns and filters, and choose between exporting all pages or only the current view.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/remove-html-kendo-ui-jquery-grid-excel-export
Summary: Learn how to remove HTML tags from Kendo UI for jQuery Grid Excel exports so template-rendered cells export as plain text. You’ll hook into the excelExport event, iterate e.workbook.sheets[n].rows and cells, detect string values with markup, and replace each cell.value with stripped text (for example, via a temporary DOM element) to produce clean CSV/XLSX output.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/merging-rows-excel-export-kendo-ui-jquery-grid
Summary: Learn how to merge cells across adjacent rows in a Kendo UI for jQuery Grid Excel export by handling the excelExport event and modifying the generated workbook. The article walks you through computing contiguous ranges (for example, identical values in a column), adding them to sheet.mergedCells using Excel addresses like A2:A5, adjusting cell values/formatting as needed, and accounting for header rows when calculating row indices.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/map/azure-tiles
Summary: Configure the Kendo UI for jQuery Map to use Azure Maps raster tiles by adding a tile layer whose urlTemplate targets the Azure Maps tile endpoint with your subscription key. You’ll map the Kendo template tokens (#= zoom #, #= x #, #= y #) to Azure’s z/x/y parameters, choose a tilesetId (for example microsoft.base.road or microsoft.imagery), and set attribution, 256 tile size, and zoom bounds, with notes on Azure Maps key usage and allowed domain restrictions.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/binding/web-api-binding
Summary: You bind the Kendo UI for jQuery Grid to ASP.NET Web API by including kendo.webapi.js and setting the DataSource type to "webapi". You configure RESTful transport (GET, POST, PUT, DELETE), enable serverPaging/serverSorting/serverFiltering, and define the schema/model so the Grid sends paging, filtering, and sorting parameters correctly and reads the data and total count from the API response.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/instantiate-kendo-ui-jquery-mediaplayer-mvvm
Summary: You will learn how to instantiate the Kendo UI for jQuery MediaPlayer in an MVVM view when data-role initialization is not supported by creating a custom MVVM binder that constructs the widget and binds an observable media object to its options. The article shows how to keep the player synchronized with the view model by reacting to changes and calling setOptions for properties like source, poster, autoPlay, and mute.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/combine-toolbar-functions-dropdown-kendo-ui-jquery-spreadsheet
Summary: Learn how to customize the Kendo UI for jQuery Spreadsheet toolbar to combine common functions into a single dropdown that inserts formulas into the active cell (e.g., SUM, AVERAGE, COUNT, MIN, MAX). You’ll configure a custom toolbar item and wire its selection events to the Spreadsheet API so each dropdown item applies the corresponding formula to the current selection or range.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/displaying-blank-items-as-blank-in-kendo-ui-for-jquery-multiselect
Summary: Learn how to make empty-string or null items display as visually blank in the Kendo UI for jQuery MultiSelect, both in the dropdown list and in the selected tags. You’ll customize itemTemplate and tagTemplate to conditionally render a non-breaking or zero‑width space for blank values so items remain selectable without showing “undefined” or placeholder text.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/filemanager-azure-blob-storage
Summary: Learn how to connect the Kendo UI for jQuery FileManager to Azure Blob Storage by implementing server-side endpoints that map the FileManager transport (read, create folder, upload, delete, download) to Azure Storage SDK operations. You’ll list blobs by prefix and return the expected FileManager schema, handle virtual folders and recursive deletes, generate SAS URLs for secure downloads/uploads, configure CORS, and wire up the client-side DataSource to those endpoints.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/change-contextmenu-item-text-kendo-ui-jquery-grid
Summary: Explains how to dynamically change a Kendo UI for jQuery ContextMenu item’s text when the menu is bound to a Grid. You handle the ContextMenu open event, get the clicked row’s dataItem from the Grid, locate the target menu item (by id or index), and update its label via the API or by setting the .k-link text. This enables context-aware labels (for example, including the row’s field values) at runtime.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/show-week-number-scheduler-timeline-month-views
Summary: This article shows how to display week numbers in the Kendo UI for jQuery Scheduler Timeline and Month views by customizing the rendered header in the dataBound/navigate events. It computes ISO (or culture-specific) week numbers for the visible dates using kendo.date utilities and injects them into the DOM so the week labels stay in sync as the user navigates or resizes.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/compact-number-formatting
Summary: Learn how to format numbers in compact notation (K, M, B) in Kendo UI for jQuery using Intl.NumberFormat with notation: "compact" and a reusable formatter function. The article shows how to integrate the formatter into Grid column templates, Chart labels, and other widget templates with culture-aware output and precision control, and notes browser support considerations. Use it to keep numeric displays concise without changing the underlying data.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/automatic-scrolling-taskboard-drag-drop
Summary: Learn how to add automatic scrolling to the Kendo UI jQuery TaskBoard during card drag-and-drop. You detect the pointer near the column or TaskBoard container edges and programmatically adjust scrollTop/scrollLeft (e.g., via a timer or requestAnimationFrame) while the drag is active to enable vertical and horizontal scrolling. The article wires this logic into the TaskBoard’s drag/sort events so you can reliably move cards to off-screen targets across long columns.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/ai-components
Summary: Integrate Kendo UI for jQuery AI components—AI Prompt and AI Chat—with LLM providers (OpenAI, Azure OpenAI, custom endpoints) through a backend proxy. The article explains configuration and event handling (prompt templates, system messages, streaming responses, conversation history, request/response/error events) and covers API key security to implement AI chat and prompt workflows in your app.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/kendo-ui-clear-icon-span
Summary: This article explains how Kendo UI for jQuery renders the clear (x) icon as a span inside input widgets and how to reliably target it. You will learn how to enable or disable the clear button and use CSS/JavaScript to hide, style, or reposition the generated icon span to avoid overlap or alignment issues in TextBox, ComboBox, DropDownList, and DatePicker widgets.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/sortable/accessibility/overview
Summary: This article outlines the accessibility behavior of the Kendo UI for jQuery Sortable, covering WCAG 2.2/Section 508 targets, WAI-ARIA semantics, focus management, and screen reader considerations. It clarifies keyboard interaction and known limitations of drag-and-drop, and guides you on structuring markup and configuration to achieve an accessible sorting experience.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/dropdowntree/binding/load-on-demand
Summary: Configure the Kendo UI for jQuery DropDownTree to load child nodes on demand (lazy loading) from a remote endpoint when a node is expanded. Set loadOnDemand: true and bind a HierarchicalDataSource with transport.read, schema.model.id, and schema.model.hasChildren; pass the expanded node’s id to the server so it returns only that node’s children, reducing the initial payload for large hierarchies.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/controls/sortable/accessibility/keyboard-navigation
Summary: This article documents keyboard navigation and accessibility for the Kendo UI for jQuery Sortable, showing how you focus the component, move between items, initiate reordering via keyboard, reposition items, drop, and cancel. It specifies the supported keyboard shortcuts plus the ARIA roles/attributes and focus management used to meet WCAG requirements and support screen readers, so you can implement and test accessible item reordering.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/fixing-bar-visibility-chart-long-labels
Summary: When long category axis labels in a Kendo UI for jQuery Bar/Column Chart consume too much space, the plot area can collapse and bars may appear hidden. Fix this by using categoryAxis.labels.visual to render wrapped or truncated labels within a fixed width and adjusting axis padding/margins, so the chart reserves bounded space for labels. The article includes sample code to measure text and draw multi-line labels, preserving bar visibility and label readability.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/stop-event-propagation-buttons-panelbar-header-contenturl
Summary: Learn how to prevent Kendo UI for jQuery PanelBar headers from expanding/selecting when clicking buttons placed in the header while using contentUrl. The article shows binding delegated handlers and calling e.preventDefault() and e.stopPropagation() on button click (and mousedown/touchstart if needed) so the event doesn’t bubble to the header anchor (.k-link), keeping header controls interactive without triggering PanelBar actions.

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/preventing-auto-increment-dragging-kendo-ui-jquery-spreadsheet
Summary: Learn how to prevent auto-increment when dragging the fill handle in the Kendo UI for jQuery Spreadsheet by forcing drag-fill to copy the original value instead of creating a numeric/date series. You’ll intercept the Spreadsheet change event to detect drag-fill and programmatically reset the target range, with an option to hide the fill handle via CSS if you need to disable drag filling entirely.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/customize-star-colors-kendo-ui-jquery-rating
Summary: The Kendo UI jQuery Rating does not expose a color option, so you customize star colors via CSS. Override the widget’s selectors for unselected, selected, and hover states to set your desired colors. The article shows the exact classes to target (e.g., .k-rating-item, .k-selected, .k-hover, .k-icon/.k-svg-icon) with sample rules.

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

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

Article: https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/custom-check-all-checkbox-kendo-jquery-dropdowntree
Summary: Learn how to add a custom “Check all” checkbox to a Kendo UI for jQuery DropDownTree and wire it to select or clear all nodes. The article shows rendering the control when the popup opens, accessing the internal TreeView to programmatically toggle the checked state for all items, and syncing the header checkbox (checked/indeterminate) by handling the widget’s check/change events.

Feel free to check them out and share your thoughts!

The Telerik Team

Standardising of Chart bar width/length

My requirement are as such

on page load, no chart will be loaded
when user click on the various domains button then the chart will load
all data in for all the chart will always be between 0 to 100
bar width vs value should also be same. i.e a 60 on chart A must always be the same with 60 on chart B regardless of its parent container
height of each bar should be 40px regardless of the number of category or series it has

my current issue

the chart value get clipped
width of the bars are not the same

did a simplified version of my code in this dojo link

Chart Recommendation

Would like to check if this chart is possible using kendo chart

Normal scenario where there is score difference between current and previous year

Scenario if multiple domains score the same for highest/ lowest score

Scenario if there is no change compared to the previous report

Scenario if all domains score the same for highest/ lowest score

Mobile display

File view icons mixed up

Hi, please see the file view icons demoed on this page: https://demos.telerik.com/kendo-ui/filemanager/index

Clicking on 'Grid View' displays the FIle List view and vice versa, which is what we are seeing when implemented also.

The screenshot of the control seems to display the action of the icons correctly: https://www.telerik.com/kendo-jquery-ui/documentation/controls/filemanager/overview

Value label not showing

this image below is the expected outcome

dojo link of what i have done

chart will load upon clicking on the various buttons

Issue with Dropdown Not Showing in Kendo Inline Grid

Hello all,

I’m working on an inline editable Kendo Grid and trying to add a dropdown list for one of the columns. However, when I run it, the dropdown doesn’t load properly. Instead of showing the item names, the textbox displays [object Object].

I’m using Kendo version 2025.3.825, and my code must comply with CSP rules.

Could someone guide me on how to fix this so the dropdown shows the correct text values instead of the object?

ASP.NET MVC Grid Custom Editing Demo | Telerik UI for ASP.NET MVC

Custom Downloader Down?

I am trying to use https://www.telerik.com/download/custom-download (Custom downloader) for jQueryUI for the latest version 2026.1.212 but none of the checkboxes are appearing or the download button.

Anyone else experiencing this?

Display count of children on treeView nodes

I am using the kendo treeview and need to display a count of the children on the node. How would I do this? I've tried the other solutions such as item.children.view() and item.children.data() but those always return 0. I've also set loadOnDemand to false which has no effect.

Tabstrip append not showing content

Append not showing tab content and throws when you try to select by index. Version 2024.3.1015

<div class="row" id="managing-directors-tab-strip"></div>

            const tabStrip = $("#managing-directors-tab-strip", container).kendoTabStrip({
                animation: false
            }).data("kendoTabStrip");

            tabStrip.append({ text: "Tab 1", content: "<text>111</text>" });
            tabStrip.select(index);

Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at init.contentElement (kendo.tabstrip.js:621:71)
    at init.contentHolder (kendo.tabstrip.js:631:41)
    at init._click (kendo.tabstrip.js:984:38)
    at init._itemClick (kendo.tabstrip.js:1208:22)
    at HTMLUListElement.dispatch (event.js:335:27)
    at elemData.handle (event.js:139:28)

Chat posting messages associated with a template using v2026.1.212

Hi,

I am currently trying to upgrade to Kendo UI JQuery v2026.1.212 and have noticed changes related to the way messages are posted to the chat. In previous versions (v2025.2.702) I could do the following:

function getChatUser(){
 return {
     id: kendo.guid(),
     name: "Admin",
     iconUrl: "/Images/chatIcon.svg"
 };
}    
 
 function postMessages(){
 const myChat = $("#chat").data("kendoChat");

 const myCustomTemplate = kendo.template($("#custom-template").html());
 kendo.chat.registerTemplate("custom", myCustomTemplate);

 const MD_MESSAGE = kendo.template("<div class='k-message'><div class='k-bubble fw-chat-bubble'>#= DOMPurify.sanitize(marked.parse(text)) #</div></div>");
 kendo.chat.registerTemplate("md_message", MD_MESSAGE);
 
myChat.renderMessage({
    type: "md_message",
    text: "**Hello** this is a text *markdown* message"
}, getChatUser());

 myChat.renderMessage({
     type: "custom",
     html: `<img src="/Images/chatIcon2.svg" width="400" height="350" alt="" />`
 }, getChatUser());

 }

How do I post messages to the chat referencing a template with v2026.1.212?

Thanks,

Euan

Kendo Chart Layout and onHover

would like to check if the following chart layout is possbile for Kendo Bar chart?

and also i would like to have an onHover event that will change the chart color. for example if i hover on the category or chart for Strategy Development to change its color to like this

Data binding within template

Suppose I've got an array of items, and I'd like to edit an attribute of each of those items. So I create a div, bind my array of items to it, and then specify a template to use to render each item using the data-bind attribute to bind the value of my item an input box.

e.g. (this is derived from another example I found in a separate thread),

<div id="example" data-template="template" data-bind="source: arr"></div>

<script id="template" type="text/x-kendo-template">
  <div> Age: ${age}</div>
  <input type="text" data-bind="value: age"/>
</script>

and

var arr = new kendo.data.ObservableArray([
  { name: "John Doe", age: 23 },
  { name: "Jane Doe", age: 34 }
]);

var viewModel = kendo.observable({
  arr: arr
});

kendo.bind($("#example"), viewModel);

setTimeout(function() {
  viewModel.arr[1].set('age',54);
}, 2000);

From this example, I'd expect to see the first div and text box with values of 23, and the second div and text box with values of 34. Instead I get the first div with 23 and the first text box with 34, and the second div with 34 and the second text box empty. Then when the function specified in setTimeout runs, it changes the value in the first text box, instead of the second one.

Here's a JSFiddle where you can try it: http://jsfiddle.net/2R3tF/

Seems simple to me, but I must not be understanding the plumbing enough to figure out why this doesn't work. Can someone explain, and ideally provide a version that works?

Kendo Chat 2026.1.212 doesnt trigger the suggestionsTemplate method anymore

Hi,

In version 2026.1.212 Kendo Chat is no longer calling the suggestionsTemplate method.

I am following your example on how to make a own suggestionsTemplate here:
https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/chat/configuration/suggestionstemplate

I made a Kendo Dojo UI from your example:
https://dojo.telerik.com/DmuxfMWh

As you can see the method is never called.

Date Header displays an incorrect value "12:00 AM" in every slot when majorTickis set to "full day" (1440) in timeline month view

Date Header displays an incorrect value "12:00 AM" in every slot when majorTickis set to "full day" (1440) in timeline views.

<script>
    $(function () {
        $("#scheduler").kendoScheduler({
            date: new Date("2025/6/13"),
            eventHeight: 50,
            majorTick: 1440,
            views: [ "timeline", "timelineWeek", "timelineWorkWeek", "timelineMonth"],
            timezone: "Etc/UTC",
            dataSource: {
                batch: true,
                transport: {
                    read: {
                        url: "https://demos.telerik.com/service/v2/core/meetings"
                    },
                    update: {
                        url: "https://demos.telerik.com/service/v2/core/meetings/update",
                        type: "POST",
                        contentType: "application/json"
                    },
                    create: {
                        url: "https://demos.telerik.com/service/v2/core/meetings/create",
                        type: "POST",
                        contentType: "application/json"
                    },
                    destroy: {
                        url: "https://demos.telerik.com/service/v2/core/meetings/destroy",
                        type: "POST",
                        contentType: "application/json"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return kendo.stringify(options.models);
                        }
                    }
                },
                schema: {
                    model: {
                        id: "meetingID",
                        fields: {
                            meetingID: { from: "MeetingID", type: "number" },
                            title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                            start: { type: "date", from: "Start" },
                            end: { type: "date", from: "End" },
                            startTimezone: { from: "StartTimezone" },
                            endTimezone: { from: "EndTimezone" },
                            description: { from: "Description" },
                            recurrenceId: { from: "RecurrenceID" },
                            recurrenceRule: { from: "RecurrenceRule" },
                            recurrenceException: { from: "RecurrenceException" },
                            roomId: { from: "RoomID", nullable: true },
                            attendees: { from: "Attendees", nullable: true },
                            isAllDay: { type: "boolean", from: "IsAllDay" }
                        }
                    }
                }
            },
            group: {
                resources: ["Rooms"],
                orientation: "vertical"
            },
            resources: [
                {
                    field: "roomId",
                    name: "Rooms",
                    dataSource: [
                        { text: "Meeting Room 101", value: 1, color: "#2572c0" },
                        { text: "Meeting Room 201", value: 2, color: "#f8a398" }
                    ],
                    title: "Room"
                },
                {
                    field: "attendees",
                    name: "Attendees",
                    dataSource: [
                        { text: "Alex", value: 1 },
						{ text: "Bob", value: 2 },
						{ text: "Charlie", value: 3 }
                    ],
                    multiple: true,
                    title: "Attendees"
                }
            ]
        });
    });
</script>

Date Header displays an incorrect value when slotduration is set to "full day" in timeline month view

In Kendo Scheduler Angular,

Date Header displays an incorrect value when slotduration is set to "full day" in timeline month view. it should not display 12:00 AM in each slot.

 <kendo-scheduler
      [kendoSchedulerBinding]="events"
      [selectedDate]="selectedDate"
      [slotDuration]="1440"
    >
      <kendo-scheduler-timeline-month-view>
      </kendo-scheduler-timeline-month-view>
    </kendo-scheduler>

using a key/value pair array for datasource for DropDownList

is it possible to add a key/value pair array for datasource for DropDownList

The guide here shows how to add a value/array as the datasource.


<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: {
    data: ["One", "Two"]
  }
});
</script>
However I need something like this. i.e a key/value pair.
i.e I need to display the key in the dropdown but return the value if the dropdown is selected.

<input id="dropdownlist" /><script>
$("#dropdownlist").kendoDropDownList({
  dataSource: {
    data: [{email: 'one'} , {email: 'Two'}],
    dataTextFiled: "email",
    dataValueField: "email"
  }
});
</script>

Kendo Chat with skipSanitization: true makes img tags and some a href tags break

Hi,

Kendo Chat with skipSanitization: true are still changing the messages so the outputted html breaks since it get A href tag inserted in bad places.

For example if I try to render an img tags it gets broken since a new A tag are being inserted in it so the html in the output message are invalid.

If the "src" url of the image tag doesnt starts with "https:" then it works. So now I need to do something like this to get it working:

let url = "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg";
url = url.replace("https:", "");
// becomes "//demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg"

Same issue with A href tags url. If they contains a query string then they also became broken. This can also be fixed by removing https: so they just start with //. Works until you have www in them, then it will never work.

Here is examples of this issue:
https://dojo.telerik.com/RrwHKAfv

I want to use a markdown parser (https://www.npmjs.com/package/marked) with DOMPurify.sanitize for my chat but doenst really work right now.

Am I doing something wrong or have I missunderstood what "skipSanitization: true" means?

Best Regards,
Douglas

Kendo Grid Keyboard Navigation Fails

I am trying to implement keyboard only navigation on a web application I am developing to meet accessibility requirements. I am running into problems with the Kendo Grid.

Here is a dojo: https://dojo.telerik.com/KUcMekCh

I have a grid with 2 locked columns with a button in the first column and a hyperlink in the second column, the other columns just have text. I set navigatable to true. None of my fields are editable.

When the user tabs to the grid, they first get the search bar in my custom grid toolbar. Next they tab to the button (which happens to be a bootstrap dropdown menu but I don't think that is relevant). Here is where the issues start:

They then hit tab again and sometimes are taken to the hyberlink while other times they are taken to the next row, skipping column 2's hyperlink.
The grid does not always enter Kendo's navigation mode. When it doesn't, there is no way for the user to interact with the column header which has the sort and tooltip buttons in it.
When they get to the bottom of the grid, the locked side will scroll vertically but the unlocked side remains in place, causing the rows to be misaligned.
When an input cell is in the unlocked portion of the table, the user has to tab through the entire list before getting back to editing the input for a row. This isn't logical.
I worry that if there were editable cells, which some of my grids have, the user won't be able to tab to the next editable cell and instead will be forced to navigate through every cell. I don't want to make it more difficult for a normal user in order to accommodate a keyboard only user so there needs to be a way for both to work well.
Often the focus ends up on the unlocked table which attempts to put a blue outline around that, however, the outline isn't fully visible since that is inside of a scrollable div.
You can click into a cell with navigatable set to true and then use the navigation but that doesn't work for a keyboard only user.
When navigatable is not turned on, the user cannot scroll vertically if they tab to the table.

Switch design issue with last release and bootstrap theme

Hi,

The switch is very tiny!

Best regards,

Laurent.

Multiselect bug

Hi,

What the hell is that bug with multiselect on last release?

Just type-in text of one list entry, select and admire...

Best regards,

Laurent.

diagramming from simple text format

Can Kendo diagram support drawing from a plain text format - maybe markdown driven - like mermaid.js ?

or do you have any sample code that can adapt?

Thanks

Chris

Tab to the next focusable or editable cell in a kendo grid

I have a kendo grid with several columns. The grid has in-cell editing enabled. I need the user to be able to press the tab key and ONLY tab between cells with focusable elements (such as a button) or editable cells. How would I accomplish this?

Note: the solution here does not work when you have grouped or filtered rows.

https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/skip-non-editable-cells-when-tabbing

Custom Tools for Kendo Editor

Would like to check on how to achieve the following

Having a custom button/control to allow user to add a placeholder for youtube video with the following requirements, when in editor when show some short of placeholder where user can enter the youtube link. when displaying the content out on a page, the placeholder will become an iframe to show the video
for image upload, how do i integrate to MS SQL Database such that all uploads will be saved to the DB, user will also be able to select image previously uploaded by other users

.set causes endless loop in save function

I have a grid with a local data source and some editable cells. When a user changes one of the cell's values, it needs to run a few different api calls to get the new values for some of the other cells and then display those. The problem is that when I call .set("fieldName", "value") inside the save command, I get an endless loop. How do I fix this? I have attached a Dojo showing what I mean. If you change the name in the Dojo, the age and DOB should change to something else (I know my example is a little silly given the fields but this is just an example, my real fields are different). Instead, I get an endless loop in the console.

https://dojo.telerik.com/wmQNdSaZ

Border disappears after deleting a row (reproducible with simple steps)

Hello Kendo UI team,

We are using Kendo UI for jQuery Spreadsheet and have encountered a border rendering issue that can be reproduced with a very simple setup and no custom configuration.

Reproduction steps

Initialize a basic Spreadsheet with default options.
Select the range A1:C3.
Apply borders to the selected cells (for example, all borders).
Select row 3 and delete the row.

Actual result

After deleting row 3:

The top border of cell B1 disappears.
Other borders remain unchanged.
The final border state becomes visually inconsistent and unexpected.

The attached screenshots (step1 → step4) show the full process and the resulting issue.

Expected result

Borders explicitly applied by the user should remain intact.
Deleting row 3 should not affect the top border of B1, since that cell is not part of the deleted row.

Request

Is there any solution or workaround for this behavior?

Thank you very much for providing such a powerful and well-designed UI library. We really appreciate the work behind Kendo UI and would love to continue using the Spreadsheet component.

Border disappears after deleting a row (reproducible with simple steps)

Hello Kendo UI team,

We are using Kendo UI for jQuery Spreadsheet and have encountered a border rendering issue that can be reproduced with a very simple setup and no custom configuration.

Reproduction steps

Initialize a basic Spreadsheet with default options.
Select the range A1:C3.
Apply borders to the selected cells (for example, all borders).
Select row 3 and delete the row.

Actual result

After deleting row 3:

The top border of cell B1 disappears.
Other borders remain unchanged.
The final border state becomes visually inconsistent and unexpected.

The attached screenshots (step1 → step4) show the full process and the resulting issue.

Expected result

Borders explicitly applied by the user should remain intact.
Deleting row 3 should not affect the top border of B1, since that cell is not part of the deleted row.

Request

Is there any solution or workaround for this behavior?

Thank you very much for providing such a powerful and well-designed UI library. We really appreciate the work behind Kendo UI and would love to continue using the Spreadsheet component.

Text overflow in cells

If I import an excelfile, where cells have text with overflow into the next cell, the excel file will show the overflowing text. The spreadsheet editor is hiding overflowing text behind the following cell.

Is it possible to format the spreadsheet to show overflowing cell content like in excel?

I know, Excel is showing overflowing content only, if the following cells are ampty - but this is exactly what we face. There are a bunch of excelfiles to process in our application, where people didn't care about formating cells with overflowing content. We just want to show this content like excel.

KendoUI display wrong Turkey currency when value over 100K

I have a page which display simple value with this control & JS, appreciate anyone could correct my mistake below. Thanks.

*Remove all un-necessary code to simplified sample code

Javascript



kendo.culture("tr-TR");

<script src="@Url.Content($"/cultures/kendo.culture.tr-TR.min.js")"></script>

HTML

<span data-format="n2" data-bind="text: TotalCompletePrice" />

if less than 100K, the value display fine -->12.232,00

but, when the value over 100K it will display like below which is incorrect format

Wrong- 1.24.544,00
expected-124.544,00

How do I add a new culture to be included in the next release?

I would like to add the culture code en-JP to be included in the next release? I created a .js file. Where do I submit it?

kendo.cultures["en-JP"] = {
    // <language code>-<country/region code>
    name: "en-JP",
    // The "numberFormat" defines general number formatting rules.
    numberFormat: {
        //numberFormat has only negative pattern unlike the percent and currency
        //negative pattern: one of (n)|-n|- n|n-|n -
        pattern: ["-n"],
        //number of decimal places
        decimals: 2,
        //string that separates the number groups (1,000,000)
        ",": ",",
		// A string that separates a number from the fractional point.
        ".": ".",
        //the length of each number group
        groupSize: [3],
        //formatting rules for percent number
        percent: {
            //[negative pattern, positive pattern]
			// negativePattern: one of -n %|-n%|-%n|%-n|%n-|n-%|n%-|-% n|n %-|% n-|% -n|n- %
            //positivePattern: one of n %|n%|%n|% n
            pattern: ["-n %", "n %"],
			// The number of decimal places.
            decimals: 2,
			// The string that separates the number groups (1,000,000 %).
            ",": ",",
			// The string that separates a number from the fractional point.
            ".": ".",
			// The length of each number group.
            groupSize: [3],
            //percent symbol
            symbol: "%"
        },
        currency: {
			// [negative pattern, positive pattern]
			// negativePattern: one of "($n)|-$n|$-n|$n-|(n$)|-n$|n-$|n$-|-n $|-$ n|n $-|$ n-|$ -n|n- $|($ n)|(n $)"
            //positivePattern: one of "$n|n$|$ n|n $"
            pattern: ["($n)", "$n"],
			// The number of decimal places.
            decimals: 2,
			// The string that separates the number groups (1,000,000 $).
            ",": ",",
			// The string that separates a number from the fractional point.
            ".": ".",
			// The length of each number group.
            groupSize: [3],
			// The currency symbol.
            symbol: "¥"
        }
    },
    calendars: {
        standard: {
            days: {
				// The full day names.
                names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
				// The abbreviated day names.
                namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
				// The shortest day names.
                namesShort: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]
            },
            months: {
				// The full month names.
                names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
				// abbreviated month names
                namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            },
            // The AM and PM designators.
            // [standard,lowercase,uppercase]
            AM: [ "AM", "am", "AM" ],
            PM: [ "PM", "pm", "PM" ],
            // The set of predefined date and time patterns used by the culture.
            patterns: {
                d:"yyyy/MM/dd",
                D:"yyyy MMMM dd",
                F:"yyyy MMMM dd H:mm:ss",
                g:"yyyy/MM/dd H:mm",
                G:"yyyy/MM/dd H:mm:ss",
                m: "MMMM dd",
                M: "MMMM dd",
                s: "yyyy'-'MM'-'ddTHH':'mm':'ss",
                t: "h:mm tt",
                T: "h:mm:ss tt",
                u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'",
                y:"yyyy MMMM",
                Y:"yyyy MMMM"
            },
            // The first day of the week (0 = Sunday, 1 = Monday, and so on).
            firstDay: 0
        }
    }
};

Getting License worning message "both paid and trial usage. Learn how to set up a license key."

Hi,

I have downloaded the zip file from telerik(Progress® Telerik® UI for ASP.NET MVC) site and used in my project. I have licensed version of telerik. I applied license in below approaches
1. Downloaded the key license .txt file and placed in the root folder of project and also added in system variables.
2. Downloaded the script license and placed in the project scripts, refereed in _layout.cshtml page.

Either of the approaches I am getting a warning message at the top of my application while running the application.

message: both paid and trial usage. Learn how to set up a license key."

Please guide me how to setup license if I am missing something here.

jquery scheduler horizontal scroll and grouping

Hello,

I need to show the scheduler right to left group by date with scroll in week view.
The problem is with the horzinotal scroll that double click on a cell recognize the cell resource wrong.

the example html is attached as txt file

insertHTML does not work in Firefox

I'm using Kendo UI for jQuery.

I have the following code which works fine in Chrome and Edge on Windows

var ke = $('#editor').data("kendoEditor");
ke.value('');
ke.exec("insertHtml", { html: 'hello' });
ke.update();

but in Firefox i get the following issue

jQuery.Deferred exception: can't access property "removeAllRanges", t is null selectRange@http://localhost/libs/KendoUI/kendo.all.min.js:9:2152299

Can you help please?

Thanks

Craig

Needs to change the title of Schedule delete dialog.

Dear team, I needs to change the delete dialog box of Schedules. can anyone knows how to do that? I do not wants to add custom popup rather i wants to find a way that helps me to change the title of delete dialog.

I am using React 18.2.

Editor change event triggered when text not changed

I have an editor configured like this:

                @(Html.Kendo().EditorFor(m => m.MyTextData)
                    .Tag("div")
                    .Name("MyTextData")
                    .Resizable(x =>
                    {
                        x.Content(true);
                        x.Min(120);
                        x.Max(400);
                        x.Toolbar(false);
                    })
                    .StyleSheets(css => css.Add(Url.ContentVersioned("~/Content/EditorStyles.css")))
                    .Encode(false)
                    .Events(e => e.Change("onEditorChangeOfContent"))
                    .Tools(tools => tools
                        .Clear()
                        .Bold()
                        .Italic()
                        .Underline()
                        .JustifyLeft()
                        .JustifyCenter()
                        .JustifyRight()
                        .InsertUnorderedList()
                        .InsertOrderedList()
                        .InsertLowerRomanList()
                        .InsertUpperRomanList()
                        .Indent()
                        .Outdent()
                        .FirstLineIndent()
                        .SubScript()
                        .SuperScript()
                        .TableEditingWithCellBorder()
                    )
                )

When first clicking in the editor text area then clicking out of the text area without changing any of the text, the blur function is called and in the blur function a comparison is made between "value" and "old". In this first call to blur, old is undefined so the match is not made and the change event is triggered as if the text was changed. Note that if the same action of clicking in and out of the text area is done again, old contains the correct value and no change event is triggered, so it works differently the second time. The change event should not be triggered on the first action as the text was not changed.

Here is the blur function in Kendo:

         _blur: function() {
                var textarea = this.textarea;
                var old = textarea ? textarea.val() : this._oldValue;
                var value = this.options.encoded ? this.encodedValue() : this.value();

                this.update();

                if (textarea) {
                    textarea.trigger("blur");
                }

                if (value != old) {
                    this.trigger("change");
                    if (textarea) {
                        textarea.trigger("change");
                    }
                }

Translate filterable cell in grid

I have a grid with a filterable cell. A translate pipe is used in its template - this causes that the filter does not work properly, as it recognizes the original values and not the translated ones.

{
field: "xxx",
title: "foo",
width: "120px",
template: "{{ 'yyy' | translate }}",
filterable: {
cell: {
showOperators: false,
operator: 'contains',
suggestionOperator: "contains"
}
}
},

Is there any way to get the filter values translated as well?

This question is similar to https://www.telerik.com/forums/grid---custom-filtering-function-for-a-particular-column, except that this is related to Kendo for jQuery.

Performance issue with multiselect dropdown popup closing - 2025.2.520 version.

We are using KendoUI library for jquery. We upgraded from 2021 to 2025.2.520 version.

After upgrading we are facing issue with multiselect dropdown. Control having change events, after selecting any new value or removing existing values- on-closing of list items popup we are triggering "SelectionChanged" event, so it's taking more time to close the popup and disabling all other controls click event. After closing the popup , we are able to click on other controls.
How to overcome this issue?

Dropdown list was not loading for Inline Editable Kendo Grid

Hi,

I want load dropdown list in a editable grid, I have used below approach. But List was not loading instead I am getting [object object] in textbox.

Can you please help me to find fault.

I ma using Kendo 2025.3.825 version and it should compile with CSP.

ASP.NET MVC Grid Custom Editing Demo | Telerik UI for ASP.NET MVC

kendoAutoComplete: change remote url

I'm using a multiSelect and trying to append a query string ("?str=SOMETHING") to the URL for each call to the server.

I'm writing this:

var viewModel = kendo.observable( {
    attributesForMulti: new kendo.data.DataSource( {
            serverFiltering: true,
            transport: {
                read: {
                    url: "/manager/ajax/attributes",
                    data: {
                        str: function() {
                            var element = $( "#product-important-attributes" );
                            var multi = element.data( "kendoMultiSelect" );
                            // multi.value() is undefined
                            return multi.value();
                        },
                    },
                },
                parameterMap: function( data, type ) {
                    if ( type === "read" ) {
                        return { "str": data.str() };
                    }
                }
            },
            schema: {
                data: function( xhr ) {
                    return xhr.data;
                }
            },
        } );

} )

HTML:

<select id="product-important-attributes" 
data-placeholder="-- Seleziona gli attributi"
data-role="multiselect" 
data-bind="source: attributesForMulti, value: product.importantAttributes" 
data-value-field="id"
data-text-field="name">
</select>

The problem is that I can't get the string "color" in widget, to pass it in query string:

var multi = element.data( "kendoMultiSelect" );
 multi.value();

multi.value() iIt's always undefined.

This code works perfectly with "kendoAutoComplete," but I can't use it because it needs to select more than one value in the select widget.

Any ideas?

Many thanks

CSP issue with Kendo Editable Popup from Editor Templets

Hi,

I as using Editor Templates for Custom Editable popup window in Kendo grid and I have to configure CSP header "script-src 'self'". I am able to open the editable popup window but getting below error. I was thinking this is due to using Editor Templates. Can you please help to solve this. If not possible any other approach to fix this.

I am using Telerik Kendo 2025.3.825 version

"Executing inline script violates the following Content Security Policy directive 'script-src 'self' 'unsafe-eval' https://www.googletagmanager.com https://www.google-analytics.com'. Either the 'unsafe-inline' keyword, a hash ('sha256-+x7Aqy5UP8GiQGBhhjEJzGrnw0mBj6s2jbzcAjtk9C0='), or a nonce ('nonce-...') is required to enable inline execution. The action has been blocked."

kendo inputs: Updating global variable on change()

Hello, sorry for the, maybe, dumb question, but I have a problem I can't solve.

I'm trying to update a DataSource transport data related on the change event of another input, here is the code:

                        var dp = new Date();
			var innerValue = 0;				
	function initPagamento(isNew) {

		dp = new Date();
		innerValue = 0;
		
		let ds = new kendo.data.DataSource({
				transport: {
					read: {
					url: "myURL",
					method: "post",
					data: {
					  data_movimento: dp.toLocaleDateString("it-IT"),
					  macro_categoria: innerValue
					},
					dataType: "json"
					}
				}
		});
		
		
		let datapagamento = $("#datapagamento").kendoDatePicker({
            format: "dd/MM/yyyy",
			change: function(x){
				$(".k-svg-i-save").parent("button").removeClass("k-disabled");
				dp = this.value();
				
				macro_categoria.dataSource.read();
				macro_categoria.trigger("change");
				
			}			
        }).data("kendoDatePicker");	
		//setInterval(function(){console.log(dp)}, 1000);
		
		let categoria =	$("#categoria").kendoDropDownList({
                filter: "contains",
				autoBind: true,
                optionLabel: "Seleziona una Categoria...",
 				dataTextField: "nome",
          		dataValueField: "id",
				dataSource: null,
			 change: function(x){
				 $(".k-svg-i-save").parent("button").removeClass("k-disabled");
			 }
		 }).data("kendoDropDownList");

		let macro_categoria = $("#macro_categoria").kendoDropDownList({
							filter: "contains",
							autoBind: true,
							optionLabel: "Seleziona una Macro Categoria...",
							dataTextField: "nome",
							dataValueField: "id",
			dataSource: {
				transport: {
					read: {
					url: "anotherUrl",
					method: "post",
					data: {
					  entrata: "0",
					  data: dp,
					},
					dataType: "json"
					}
				}
			},
			change: function(x) {

				$(".k-svg-i-save").parent("button").removeClass("k-disabled");

				innerValue = this.value();
				if(!isNullOrEmpty(innerValue) && (innerValue > 0 && innerValue != "0")) {
					categoria.dataSource = ds
					ds.read();
				} else {
					categoria.dataSource = null
				}
			}
			}).data("kendoDropDownList");
}

the two variables I want to change are dp and innerValue, so that when I change the datepicker value, dp (the date variable) is updated to the selected date, then the datasource (ds) has to call the transport > read uri sending via post the new dp value. Same thing with innerValue (this is the value from a kendoDropDownList, but I think the problem is the same...

it seems that the problem is here:

[...]
change: function(x){
				$(".k-svg-i-save").parent("button").removeClass("k-disabled");
				dp = this.value();
				
				macro_categoria.dataSource.read();
				macro_categoria.trigger("change");
				
			}
[...]

where dp value is updated locally (maybe redeclared locally inside the change() event), but not in the entire scope, as I want.

Please help me! If you need further infos let me know.

Thank you.

P.S.: I think that if I destroy and redeclare the DataSource instead of changing dp and innerValue values, it shall work, but I am slightly sure that there must be a simpler way...

Virtualize a Kendo Dropdownlist with local datasource array of strings

I have a local array of between 2 and 2000+ strings that I would like to virtualize. For some reason, when I add the valueMapper to the virtual function when there are only 4 items in the array, it causes the user to not be able to click on anything.

Here is a dojo showing what I tried. You can click on a letter and nothing will happen.

https://dojo.telerik.com/oojEQyxf

Control which columns can be reordered and where

I have a kendo grid and I want the user to be able to reorder the columns but I have the following rules:

1. Only the unlocked columns can be moved.

2. I don't want them to be able to move them to the locked side of the grid.

3. I don't want the columns on the locked side of the grid to have the drag cursor or tooltip since they should not be reorderable.

How would I achieve this?

Here is what I tried and it doesn't really work because:

1. Assuming there are 4 locked columns (columnsBaseLength = 4), moving column 6 to position 5 throws it on the locked side making 5 locked columns rather than making it the first unlocked column.

2. I still see the tooltip when dragging the locked columns around.

        // Note: order is defined when initializing the grid. It is set to the index of the column.
// Note: columnsBaseLength is set to 4 since I have 4 locked columns.
 
        columnReorder: function (e) {
            let grid = this;
            let columnToMove = e.column;
            let newIndex = e.newIndex;
            let oldIndex = e.oldIndex;

            // Determine if the new index is within the locked column area// This requires knowing the number of currently locked columns
let isMovingIntoLockedArea = newIndex < columnsBaseLength;
            let isLockedColumn = columnToMove.order < columnsBaseLength;
            if (isLockedColumn || isMovingIntoLockedArea) {
                console.warn("Locked columns cannot be reordered. Cannot move to a locked column");
                setTimeout(function () {
                    grid.reorderColumn(oldIndex, columnToMove);
                }, 1);
            } else {
                setTimeout(function () {
                    $.each(grid.columns, function (index, column) {
                        column.order = index;
                    });
                }, 1);
            }
        },

selectColumn style was not removing ecent sorting completed for a column in kendo grid

Hi,

I am using Kendo Grid of 2025.3.825 version, I have observed that when I do sorting on a column,its highlighting with some color then I removed the sorting but still column was heightening with same color its has to come normal color like other columns.

Can you please help to solve this.

Enable kendoAutoComplete programmatically.

Hi everyone.

I'm driving an interface via JavaScript for testing.

Something like this:

Open a modal:

$( "body" ).find( "button[data-bind='click:open']" ).click();

Write a value in an input field:

ele.val( "myValue" ).trigger( "change" );

Switch a tab:

$( ".nav-tabs a[href='#tab1']" ).tab( "show" );

But I can't activate "kendoAutoComplete".

With this statement:

$("#myKendoAutoComplete").val( "schu" ).trigger( "keydown" );

I can write to the input, the remote call is made, but the list of items in the suggestion doesn't appear.

Any ideas?

Thanks.

How to track all content changes in Kendo UI Editor (including delete, backspace, paste, image removal)?

I’m using the kendo UI and need to track all changes made by the user. The scenarios include:

Removing an image by backspace or delete.
Using Backspace or Delete to remove text.
Selecting text and deleting it by keyboard or mouse like (cut option using right-click context menu.).
Copying text from outside and pasting into the editor (via keyboard or mouse).
Pasting images or text using right-click context menu.

Is there a single common event or the best approach to handle all these cases?
I’ve checked the change event, but it doesn’t seem to fire for all scenarios (e.g., backspace or image removal). Should I use keyup, paste, or a combination of events? Or is there a recommended way to detect any DOM/content change in the editor?

Any guidance or best practices would be appreciated.

WAVE Error on Kendo Dropdownlist Filter Input

I'm getting a WAVE Error on the Kendo Dropdownlist Filter input. Is there any way to correct this?

The error says:

Missing form label

A form control does not have a corresponding label.

This is the code being flagged:

</span></div>

TreeView Rendering Issue on iOS (iPhone/iPad) - Kendo UI 2021.2.616

We’re experiencing a rendering issue with the Kendo UI TreeView component on iOS devices (both iPhone and iPad). The problem occurs regardless of which browser is used — we’ve tested Safari, Chrome, and others, and the issue persists across all of them.

We’re currently using Kendo UI version 2021.2.616.

You can see attached screenshots.

Has anyone else encountered this problem or found a workaround/fix for TreeView rendering issues on iOS?

Used code:

@* tree view *@
<div class="col-md-3 col-lg-3">
<div class="card border-primary treeview-container">
<div class="card-header bg-secondary">
<h5>Patient Events</h5>
<div class="card-actions">
<button class="btn btn-outline-primary"
id="btn-expand-treeview">
<i class="fas fa-chevron-down fa-fw"></i> Expand
</button>

<button class="btn btn-outline-primary"
id="btn-collapse-treeview"
style="display: none">
<i class="fas fa-chevron-up fa-fw"></i> Collapse
</button>

<button id="btn-new-event" class="btn btn-primary">
<i class="fas fa-plus fa-fw"></i> New
</button>
</div>
</div>
<div class="card-body">
<div id="events-treeview" class="mb-1"></div>
</div>
</div>
</div>

JS:

How do I add a record, remove a record, and replace/update a record in a Kendo Grid with a local dataSource?

let data = [
  {
    itemId: 1,
    itemName: "Apples",
    itemColor: "Red"
  },
  {
    itemId: 2,
    itemName: "Grapes",
    itemColor: "Green"
  }
];

I have a kendo grid with a local JSON dataSource (Not connected to a server). When a user fills out a form in a modal, I need to then either add, delete, or update the related record in the local kendo grid. What would be the easiest way to do each of these operations so that I don't see the dirty record indicator on the screen?

Kendo styles for 2025.3.825 version

Hi,

We are currently using 2021.1.330 version of Telerik UI for ASP.Net now we upgraded to 2025.3.825, Everything working fine but for styles few files I am unable to find with new version. We need same styles as we have in 2021.1.330 version for latest version as well.

Below are the styles we are expecting to have

kendo.bootstrap.min.css

kendo.common.min.css

kendo.default-v2.min.css

Can you please help from I can get those files for 2025.3.825 version

How to display percentages in table along with numeric filters ?

I am using strings to display percentages and filter options show the options corresponding to strings but now I want the filter options to show the numeric ones

The first attached screenshot shows the numeric filter dropdown, and the 2nd screenshot containing percentages show the alphabetic filter dropdown