Questions on Kendo UI for jQuery Forum

0 answers

79 views

Latest Online Resources about Kendo UI for jQuery

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

General Discussions

updated question on 12 Jan 2026

0 answers

8 views

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

Grid

updated question on 20 Jan 2026

1 answer

5 views

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.

Spreadsheet

answered on 20 Jan 2026

1 answer

8 views

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.

Spreadsheet

answered on 20 Jan 2026

0 answers

7 views

.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

Grid

updated question on 19 Jan 2026

1 answer

78 views

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.

Spreadsheet

updated answer on 12 Jan 2026

0 answers

33 views

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

TextArea

asked on 09 Jan 2026

1 answer

36 views

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

Localization

answered on 08 Jan 2026

1 answer

46 views

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.

Grid

answered on 06 Jan 2026

0 answers

61 views

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

Scheduler

asked on 05 Jan 2026