Kendo UI for jQuery Forum RSS

Latest Online Resources about Kendo UI for jQuery

Hello everyone,

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

Article: https://www.telerik.com/kendo-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.

Feel free to check them out and share your thoughts!

The Telerik Team

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

Hello everyone,

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

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.

Feel free to check them out and share your thoughts!

The Telerik Team

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

Hello everyone,

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

Article: https://www.telerik.com/kendo-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

Hubungi Cs Ajaib Kripto

Layanan Pelanggan Cs Ajaib Kripto +62.811-3777-29 Whatsapp atau Telepon 088801203990.

Hubungi Cs Ajaib Alpha

Layanan Customer Service Cs Ajaib Alpha +62.811-3777-29 Whatsapp atau Telepon 088801203990.

Hubungi Call Center Tokocrypto

Call Center Tokocrypto di nomor +62812-3777-29 WhatsApp atau Telepon (021) 30629429. Email; dukungan@tokocrypto.com.

cs Garuda Indonesia

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

Cara pembatalan Pinjaman Akulaku 100% Berhasil

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

cara pembatalan pinjaman tunaiku!

Berikut Cara Membatalkan Pinjaman (Tunaiku) Kamu bisa menghubungi layanan Live Chat via WA/(+62838-4848-4874.), ikuti Arahan customer service Layanan real-time 24/7.

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

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?

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

How to add a group class to a kendo dropdown tree

I would like to add a group class to the kendo dropdown tree so that each level can have a different style applied to it. How can I achieve this? Here is a basic Dojo:
https://dojo.telerik.com/nJvbmwHv

Slider issue when not initially visible on the view

We've run into a minor problem with the Kendo slider. When navigating to a new view, if that view has a slider (or multiple sliders) on it that are in an element that is not visible, the user can not change the value of the slider with the mouse. You can use the left/right arrows to change the value (and the events fire), but the slider won't move.

If you then navigate off of the view, and then back onto that same view, the slider then works. I've put a little demo together in the Dojo that illustrates what I'm talking about:

http://dojo.telerik.com/ihExU

Click "Load Secondary View:
Click "Show Panel 2"
Try to move the slider with the mouse, and then try with the keyboard arrows
Click "Back"
Click "Load Secondary View"
The slider now works, and has the value that was previously "set" by the arrow keys.

Any suggestions as to a workaround?

Kendo Slider With Text Labels

I have a need for a slider switch with text labels instead of numbers. Instead of 1,2,3 I need Small, Medium, Large. It does not appear that Kendo UI has a built in way to do this so here is the function I came up with:

/*
    This helper is designed to allow you to substitute a datasource for values in a kendo slider to do things like:
    "small", "medium", "large". 
    
    It includes 4 functions that should be used instead of the ones included with Kendo UI:

    initializeKendoSlider(options);
    getKendoSliderSelection(elementId);
    resizeKendoSlider(elementId);
    setKendoSliderValue(elementId, newValue);
*/

function initializeKendoSlider(options) {
    /*
        options = {
            elementId: string - required,
            dataSource: [{ label: string, value: any}],
            value: any - the value prop of any dataSource item
            orientation: string - defaults to "horizontal",
            tickPlacement: string - defaults to "bottomRight",
            change: custom change function. Available parameters are: selectedDataItem, e
        };

        Include this in your html to start: 
        <input id="mySlider" name="mySlider" type="text" />

        NOTE: If a proper dataSource is not passed, the slider will build as a numeric Kendo Slider.
        NOTE: The value returned by the .value() function is the index, not the actual value. You must use
              the included getKendoSliderSelection and setKendoSliderValue functions.
        NOTE: The change function will return the selected item as the second parameter which can be used in your custom change function.
        NOTE: Kendo's built in max and min methods will not work properly when using a dataSource.
        NOTE: Small steps are not supported.
    */

    if (!options.elementId || typeof options.elementId !== "string") {
        console.error("No Element ID Passed");
        return false;
    }

    let elementId = options.elementId;

    if (Array.isArray(options.dataSource)) {
        // Destroy the existing slider
        if ($(`#${elementId}`).data("kendoSlider")) {
            $(`#${elementId}`).data("kendoSlider").destroy();
            if ($(`#${elementId}`).closest(".custom-form-slider").length > 0) {
                $(`#${elementId}`).closest(".custom-form-slider").replaceWith($(`#${elementId}`));
            } else if ($(`#${elementId}`).closest(".k-slider").length > 0) {
                $(`#${elementId}`).closest(".k-slider").replaceWith($(`#${elementId}`));
            }
        }

        // Prep options for slider
        let defaultValue = options.value ? options.dataSource.findIndex(x => x.value === options.value) : 0;
        let tickPlacement = options.tickPlacement;
        if (tickPlacement !== "topLeft" && tickPlacement !== "both") {
            tickPlacement = "bottomRight";
        }
        options.tickPlacement = tickPlacement;

        // Build the slider
        let objectSlider = $(`#${elementId}`).kendoSlider({
            showButtons: false,
            dataSource: options.dataSource,
            min: 0,
            max: options.dataSource.length - 1,
            orientation: options.orientation === "vertical" ? options.orientation : "horizontal",
            tickPlacement: tickPlacement,
            value: defaultValue,
            largeStep: 1,
            change: function (e) {
                let selectedDataItem = getKendoSliderSelection(options.elementId);
                if (typeof options.change === "function") {
                    options.change(selectedDataItem, e);
                }
            },
            tooltip: {
                enabled: false
            }
        }).data("kendoSlider");

        // Changes the numbers to text labels
        var sliderItems = $(`#${elementId}`).siblings(".k-slider-items");
        $.each(options.dataSource, function (index, step) {
            var item = sliderItems.find("li:eq(" + (index) + ")");
            item.attr("title", step.label);
            item.find("span").text(step.label);
        });

        // Fixes the alignment due to absulutely positioned labels
        if (sliderItems.length > 0) {
            if (options.orientation !== "vertical" && (tickPlacement === "bottomRight" || tickPlacement === "both")) {
                let left = sliderItems.find("li:eq(0) span")[0].getBoundingClientRect().width;
                let right = sliderItems.find(`li:eq(${options.dataSource.length - 1}) span`)[0].getBoundingClientRect().width;
                $(`#${elementId}`).closest(".k-slider").wrap(`<div class="custom-form-slider" style="padding-left: ${left / 2}px; padding-right: ${right / 2}px; padding-bottom: 1.2em"></div>`);
            } else if (options.orientation === "vertical" && (tickPlacement === "bottomRight" || tickPlacement === "both")) {
                let maxLabelWidth = 0;
                $.each(options.dataSource, function (index) {
                    var item = sliderItems.find("li:eq(" + (index) + ") span");
                    let thisWidth = item[0].getBoundingClientRect().width;
                    if (thisWidth > maxLabelWidth) {
                        maxLabelWidth = thisWidth;
                    }
                });
                $(`#${elementId}`).closest(".k-slider").wrap(`<div class="custom-form-slider" style="display: inline-block; padding-right: ${maxLabelWidth + 10}px; padding-bottom: 14px"></div>`);
            } else if (options.orientation === "horizontal" && (tickPlacement === "topLeft")) {
                let left = sliderItems.find("li:eq(0) span")[0].getBoundingClientRect().width;
                let right = sliderItems.find(`li:eq(${options.dataSource.length - 1}) span`)[0].getBoundingClientRect().width;
                $(`#${elementId}`).closest(".k-slider").wrap(`<div class="custom-form-slider" style="padding-left: ${left / 2}px; padding-right: ${right / 2}px; padding-top: 1.2em"></div>`);
            } else if (options.orientation === "vertical" && (tickPlacement === "topLeft")) {
                let maxLabelWidth = 0;
                $.each(options.dataSource, function (index) {
                    var item = sliderItems.find("li:eq(" + (index) + ") span");
                    let thisWidth = item[0].getBoundingClientRect().width;
                    if (thisWidth > maxLabelWidth) {
                        maxLabelWidth = thisWidth;
                    }
                });
                $(`#${elementId}`).closest(".k-slider").wrap(`<div class="custom-form-slider" style="display: inline-block; padding-left: ${maxLabelWidth + 10}px; padding-bottom: 14px"></div>`);
            } else {
                $(`#${elementId}`).closest(".k-slider").wrap('<div class="custom-form-slider"></div>');
            }
        } else {
            $(`#${elementId}`).closest(".k-slider").wrap('<div class="custom-form-slider"></div>');
        }

        // Add event listener
        const debouncedResize = debounce(() => resizeKendoSlider(elementId), 300);
        window.addEventListener("resize", debouncedResize);

        return objectSlider;
    } else if (options.options) {
        // NOTE: This will use the standard KendoSlider initialization.
        let objectSlider = $(`#${options.elementId}`).kendoSlider(options.options).data("kendoSlider");
        return objectSlider;
    } else {
        console.error("No dataSource or options passed to initializeKendoSlider. Must have at least one");
        return false;
    }
}

function resizeKendoSlider(elementId) {
    let thisSlider = $(`#${elementId}`).data("kendoSlider");
    let options = thisSlider.options;
    let tickPlacement = options.tickPlacement;

    // Trigger the kendo slider resize to get any missing ticks
    thisSlider.resize();

    // Changes the numbers to text labels so we can calculate the size
    let sliderItems = $(`#${elementId}`).siblings(".k-slider-items");
    $.each(options.dataSource, function (index, step) {
        let item = sliderItems.find("li:eq(" + (index) + ")");
        item.find("span").text(step.label);
    });

    // Fixes the alignment due to absulutely positioned labels
    if (sliderItems.length > 0) {
        if (options.orientation !== "vertical" && (tickPlacement === "bottomRight" || tickPlacement === "both")) {
            let left = sliderItems.find("li:eq(0) span")[0].getBoundingClientRect().width;
            let right = sliderItems.find(`li:eq(${options.dataSource.length - 1}) span`)[0].getBoundingClientRect().width;
            $(`#${elementId}`).closest(".custom-form-slider").css({
                paddingRight: `${right / 2}px`,
                paddingLeft: `${left / 2}px`,
                paddingBottom: "1.2em"
            });
        } else if (options.orientation === "vertical" && (tickPlacement === "bottomRight" || tickPlacement === "both")) {
            let maxLabelWidth = 0;
            $.each(options.dataSource, function (index) {
                var item = sliderItems.find("li:eq(" + (index) + ") span");
                let thisWidth = item[0].getBoundingClientRect().width;
                if (thisWidth > maxLabelWidth) {
                    maxLabelWidth = thisWidth;
                }
            });
            $(`#${elementId}`).closest(".custom-form-slider").css({
                display: "inline-block",
                paddingRight: `${maxLabelWidth + 10}px`,
                paddingBottom: "14px"
            });
        } else if (options.orientation === "horizontal" && (tickPlacement === "topLeft")) {
            let left = sliderItems.find("li:eq(0) span")[0].getBoundingClientRect().width;
            let right = sliderItems.find(`li:eq(${options.dataSource.length - 1}) span`)[0].getBoundingClientRect().width;
            $(`#${elementId}`).closest(".custom-form-slider").css({
                paddingTop: "1.2em",
                paddingLeft: `${left / 2}px`,
                paddingRight: `${right / 2}px`
            });
        } else if (options.orientation === "vertical" && (tickPlacement === "topLeft")) {
            let maxLabelWidth = 0;
            $.each(options.dataSource, function (index) {
                var item = sliderItems.find("li:eq(" + (index) + ") span");
                let thisWidth = item[0].getBoundingClientRect().width;
                if (thisWidth > maxLabelWidth) {
                    maxLabelWidth = thisWidth;
                }
            });
            $(`#${elementId}`).closest(".custom-form-slider").css({
                display: "inline-block",
                paddingLeft: `${maxLabelWidth + 10} px`,
                paddingBottom: "14px"
            });
        } else {
            $(`#${elementId}`).closest(".custom-form-slider").css({
                display: "",
                paddingLeft: "",
                paddingBottom: ""
            });
        }
    }

    // Resize again to fix the track since we changed the padding. 
    thisSlider.resize();

    // Then replace the labels since the resize erases them.
    sliderItems = $(`#${elementId}`).siblings(".k-slider-items");
    $.each(options.dataSource, function (index, step) {
        var item = sliderItems.find("li:eq(" + (index) + ")");
        item.attr("title", step.label);
        item.find("span").text(step.label);
    });
}

function getKendoSliderSelection(elementId) {
    let thisSlider = $(`#${elementId}`).data("kendoSlider");
    let dataSource = thisSlider.options.dataSource;
    let value = thisSlider.value();
    if (dataSource) {
        return dataSource[value];
    } else {
        return {
            label: value,
            value: value
        };
    }
}

function setKendoSliderValue(elementId, newValue) {
    // newValue must exist in the dataSource or nothing will change
    let thisSlider = $(`#${elementId}`).data("kendoSlider");
    let dataSource = thisSlider.options.dataSource;
    let newValueIndex = dataSource.findIndex(x => x.value === newValue);
    if (newValueIndex > -1) {
        thisSlider.value(newValueIndex);
    } else {
        console.error(`Attempted to set the value of #${elementId} to non-existing value of ${newValue}`);
    }
    return newValueIndex;
}

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

window.initializeKendoSlider = initializeKendoSlider;
window.getKendoSliderSelection = getKendoSliderSelection;
window.setKendoSliderValue = setKendoSliderValue;
window.resizeKendoSlider = resizeKendoSlider;

Floating label overlaps textbox value

I have a sample at https://js.do/sun21170/kendouitextboxsample1, which shows up as in the screenshot below when rendered.

When I run the same sample at https://dojo.telerik.com/QASrBLOT, this problem is not there because no autofill occurs.

So, my question is how to prevent the overlap in my first sample when the autofill is occurring?

Prakash Hinduja Geneva (Switzerland) How do I set up Kendo UI components in my project?

Hello, I’m Prakash Hinduja, born in India and now living in Geneva, Switzerland (Swiss). I’m new to Kendo UI and want to set up its components in my project. Any tips, please suggest me.

DatePicker Min and Max value permit date out of range

When I use the DatePicker, the calendar displays a date between the minimum and maximum values, which is fine. However, if I manually enter a date before the minimum or after the maximum value, nothing prevents me from doing so. Even worse, the change event is no longer triggered. There's no way to validate the input manually if it's out of range.

Wouldn't it have been better for the control to block manually entered values that exceed the allowed range?

Get rid of hours:minutes text in time picker

Hi all,

I am using TimePicker in asp.net mvc. Issue is that when I remove either hours or minutes then it shows text 'hours' or' 'minutes'. How Can I remove that. I have tried couple of ways but did not work?

Want to remove this text?

Please advise how this can be done.

Thanks in advance

Mvvm: grid from array of arrays

I'd like to build a grid of divs.
I have an array of arrays, like this:

[ [ { "value": "0"}, { "value": "1", } ] ]

(Sorry, but I can't indent the code properly in the editor.)

I can't do it with MVVM.

This is how I do it:

Template container:

<div data-bind="source: matrix" data-template="frame-cells-row-tmpl">
</div>

Template row:

<script type="text/x-kendo-template" id="frame-cells-row-tmpl">
    <div class="frame-grid-row" data-bind="source: data" data-template="frame-cells-col-tmpl">
    </div>
</script>

Template col:

<script type="text/x-kendo-template" id="frame-cells-col-tmpl">
    <div class="frame-grid-col">
         #: value #
    </div>
</script>

The error I get is:

Uncaught TypeError: e.bind is not a function

It works fine if I do this:

<script type="text/x-kendo-template" id="frame-cells-row-tmpl">
    <div class="frame-grid-row" >

 ## for(var i=0; i < data.length; i++) { ##
<div class="frame-grid-cell">
 ##= data[i].value ##
            </div>
 ## } ##

    </div>
</script>

Why can't I use MVVM?

In the "row" template, is "data" the correct variable name for "source"?

Many thanks!

Taskboard Custom Editor and Customization

Hello. I am planning to use the taskboard for my code, but I would like to customize it a little bit. However Im finding almost any customization to be not possible. Im working with Copilot and its telling me a couple things that dont appear to be true:

1. On the datasource tab, I have commented out code because Copilot has told me that if I use the from attribute when defining the model that those fields would automatically map to its default title and description fields. It stays undefined until I switch to the default values.

2. The custom editor I have specified does not get acknowledged by the code. It simply loads the default one with Title and description fields. At the very minimum I just want it to show different labels than title and descritpion, such as PartyName and comments. However Im not seeing any way to not just load the out of the box solution.

Are my requests possible? The example code on this site just appear to use out of the box editing and mapping.

<body>
    <div id="taskBoard"></div>
    <script id="JurisdictionEditor" type="text/x-kendo-template">
        <div style="padding:2em; color:red;">Custom Editor Rendered!</div>
    </script>
    <script>
        $(function () {
            $("#taskBoard").kendoTaskBoard({
                dataSource: [
                    { id: 1, title: "Jane", description: "Test", status: "cited" }
                    // { id: 1, PartyName: "Jane", comments: "Test", status: "cited" } //doesnt work
                ],
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { type: "number" },
                            title: { from: "PartyName", type: "string" },
                            description: { from: "comments", type: "string" },
                            PartyName: { type: "string" },
                            comments: { type: "string" },
                            status: { type: "string" }
                        }
                    }
                },
                columns: [
                    { text: "Cited", status: "cited" }
                ],
                cardTemplate: "<div class='k-card-header'>#: PartyName #</div><div class='k-card-body'>#: comments #</div>",
                editorTemplate: kendo.template($("#JurisdictionEditor").html())
            });
        });
    </script>
</body>

multiSelect in kendo grid popup

I have an editor configured for a column which can reflect multiple values - the multiselect control binds to the source datasource just fine when a grid row is edited or a new record is being created but for the pure edit portion I need to preselect the current values from the grid row datasource - the values are there in the row object because I can see them when I do a console.log of the model field via e.model.get("UserRoleSectors") (example of value is ["2","25"] ) - however in the grid edit event handler if I try to set the value for the multi-select to ensure it reflects what values are already bound to the record via the statement e.container.find('[name="UserRoleSectors"]').data("kendoMultiSelect").value(e.model.get("UserRoleSectors")); - nothing is selected even though the values are available in the multiselect. Am I doing something wrong?

editor: function (container, options) {

// create an input element

var input = $('<select multiple="multiple" />');

// set its name to the field to which the column is bound

input.attr("name", options.field);

// append it to the container

input.appendTo(container);

// initialize a Kendo UI MultiSelect

input.kendoMultiSelect({

autoBind: true,

valuePrimitive: true,

dataTextField: "SectorAcronym",

dataValueField: "SectorNo",

dataSource: $scope.sectorsDataSource

});

LineChart container's scaling affects mouse events

Hi Telerik team!

I'm trying to scale my linechart by setting zoom Css property, but this is affecting mouse events and messing up the tooltip position and the marking wrong focused item.

As you can see here:

https://dojo.telerik.com/RQNGZUUK

So, is possible to scale linechart without affect mouse events?

Regards,

Gustavo

Display original size when inserting images

Kendo UI (2018-2019) template #= in calc() causes Invalid template on modern browsers (Edge 140 / Chrome)

Hello —

we're seeing an Uncaught Error: Invalid template when rendering a Kendo template that contains a calc() CSS expression with a #= ... # interpolation. The template works on older browsers (Edge 139 and older) but fails on newer ones (Edge 140+, recent Chrome). Could this be a compatibility/escaping change in the template engine or browser JS engine? Any guidance or workaround would be appreciated.

Code Used:

<!--SmartView Pipeline STEP Template-->
<script id="smartViewPipelineStepTemplate" type="text/x-kendo-template">
    <div class="col-xs-4">
        <div class="contenitor-element-process-monitor">
            <div class='pipelineTask element-process-monitor
                        #if(completion() < 100){ if(completion() > 0){ # blue # } }#
                        #if(completion()==100){ # complete # }#
                        #=type#'
                 idStep='#:idStep()#'>
                <div class='clickableStep'>
                    <div class='process-monitor-name'>#: stepNumber #</div>
                    <div class='process-monitor-description'>#:stepNameShort()#</div>
                    <div class='info-process-monitor'></div>

                    <!-- erroring line -->
                    <div style="width:calc(#=completion()#% - 24px)" class='progress-process-monitor clickableStep'>
                        <p>#=completion()#%</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
</script>

Error shown in console

Uncaught Error: Invalid template: '<div class="col-xs-4"> ... <div style="width:calc(#=completion()#% - 24px)" ...>'

Environment/Version

Kendo UI: v2019.1.220 (Kendo jQuery bundle in production)
jQuery: 1.12.4 included in the project
Browsers where error occurs: Edge 140+, recent Chrome (older Edge 139 works)
Template uses legacy Kendo template syntax (#=, #:, # if(...) { # ... # } #)

Columns disappearing when setting locked to true

I have a Kendo UI Grid Dojo that I am working on. When I set locked on the columns to "true", some of the columns (country, city, name) disappear.

Update: If I add a width attribute to every column, the columns stop disappearing, however when I then add in reordable, I am able to move unlocked columns over to the locked columns side. Is there a way to prevent users from moving columns from locked to unlocked and vice verca?

Here is the example:

https://dojo.telerik.com/tVXUmrjz

Javascript:

$(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: "https://demos.telerik.com/service/v2/core/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                ShipCountry: { type: "string" },
                                ShipCity: { type: "string" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShippedDate: {type: "date" }
                            }
                        }
                    },
                    pageSize: 15
                },
                height: 550,
                pageable: true,
                reorderable: true,
                columns: [
                    {
                        field: "OrderDate",
                        title: "Order Date",
                        width: 120,
                        format: "{0:MM/dd/yyyy}",
                        locked: true
                    },
                    {
                        field: "ShipCountry",
                        title: "Ship Country",
                        locked: true
                    },
                    {
                        field: "ShipCity",
                        title: "Ship City"
                    },
                    {
                        field: "ShipName",
                        title: "Ship Name"
                    },
                    {
                        field: "ShippedDate",
                        title: "Shipped Date",
                        format: "{0:MM/dd/yyyy}",
                        width: 200
                    },
                    {
                        field: "OrderID",
                        title: "ID",
                        width: 80
                    }
                ]
            });
        });

Kendo UI grid for Jquery - Filling data in to dropdown inside grid is not working.

Hi,

I am experimenting with this grid control.

I have this code where I am filling a grid with data from the SQL table. The data is loading good.

Second step : I want to edit the row and in this case , I want to edit City column which will be a dropdown in edit mode. I have the code to pull the data from database. My API is returning cities. I can see it in console.log. However, the dropdown in the edit mode does not show any data. It is blank. I am not sure where to fix it or how to fix it.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <link href="https://kendo.cdn.telerik.com/themes/12.0.0/default/default-main.css" rel="stylesheet" />
  <!-- Add the Kendo library by either using the JAVASCRIPT MODULES -->
  <script src="https://kendo.cdn.telerik.com/2025.3.825/mjs/kendo.all.js" type="module"></script>

    <script src="telerik-license.js" type="text/javascript"></script>
  
  <div id="tripsGrid"></div>
  <script type="text/javascript" >
    $(document).ready(function() {
            $("#tripsGrid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "http://localhost:54243/api/Dispatch/GetTripsForSelectedDate", // Replace with your actual API endpoint
                            type: "GET",                  // <-- key change
                            dataType: "json",
                            contentType: "application/json"
                        },
                        parameterMap: function (options, type) {
                              if (type === "read") {
                                return kendo.stringify({
                                  page: options.page,
                                  pageSize: options.pageSize,
                                  sort: options.sort,
                                  filter: options.filter,
                                  date: $("#datePicker").val() || null  // if you have a date picker
                                });
                              }
                              // For create/update/destroy, send the model as JSON.
                              // If you enable batch: true later, handle options.models[0] instead.
                              if (type === "create" || type === "update" || type === "destroy") {
                                return kendo.stringify(options); // 'options' is the dataItem for non-batch
                              }
                            }
                         
                    },
                    schema: {
                        model: {
                            id: "Trip_ID",
                            fields: {
                                Trip_ID: { type: "number" },
                                Route: { type: "string" },
                                RouteID: { type: "number" },
                                Start_Dt: { type: "string", editable : true },
                                LastName: { type: "string",  editable : true },
                                FirstName: { type: "string",  editable : true },
                                StartDesc: { type: "string" },
                                StartAddr1: { type: "string" },
                                StartAddr2: { type: "number" },
                                StartCityID: { type: "number",  editable : true },
                                StartStateID: { type: "number",  editable : true },
                                StartZipID: { type: "number",  editable : true },
                                StartCity : { type: "string",  editable : true },
                                StartState: { type: "string" },
                                StartZip: { type: "string" }                               
                            }
                        }
                    },
                    pageSize: 10, // Optional: for client-side paging
                    serverPaging: true, // Set to true for server-side paging
                    serverSorting: true, // Set to true for server-side sorting
                    serverFiltering: true // Set to true for server-side filtering
                },
                height: 550,
                sortable: true,
                pageable: true,
                filterable: true,
                editable: { mode: "inline", confirmation: "Delete this trip?" },
                columns: [
                    { command: ["edit", "destroy"], title: "&nbsp;", width: 180 },
                    { field: "Trip_ID", title: "TripID" },
                    { field: "Route", title: "Route", format: "{0:c}" },
                    { field: "RouteID", title: "RouteID" },
                    { field: "Start_Dt", title: "Start Date" },
                    { field: "LastName", title: "Last Name" },
                    { field: "FirstName", title: "First Name" },
                    { field: "StartDesc", title: "Start Desc" },
                    { field: "StartAddr1", title: "Addr1" },
                    { field: "StartAddr2", title: "Addr2" },
                    { field: "StartCityID", title: "Start City ID", editor: startCityDropdownEditor, template: "#: StartCity #" },
                    { field: "StartStateID", title: "Start State ID" },
                    { field: "StartZipID", title: "Start Zip ID" },
                    { field: "StartCity", title: "StartCity", editor: startCityDropdownEditor, template: "#: StartCity #" },
                    { field: "StartState", title: "StartState" },
                    { field: "StartZip", title: "StartZipcode" }
                ]
            });
        });
        
        
        
        //&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
        
        function startCityDropdownEditor(container, options) {
                      $('<input required name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                          optionLabel: "Select city...",
                          dataTextField: "LkupItem",
                          dataValueField: "LkupItemID",
                          valuePrimitive: true,          // model field is a number, not an object
                          filter: "contains",            // searchable
                          autoBind: true,
                          dataSource: {
                            transport: {
                              read: {
                                url: "http://localhost:54243/api/Dispatch/GetCities", // API below
                                type: "GET",                // keep POST to avoid 405/WebDAV issues
                                dataType: "json",
                                contentType: "application/json"
                              }
                            },
                            schema: { data: "data" } ,    // expect { data: [...] }
                             requestEnd: function(e) {
                              // log the raw response payload
                              console.log("API Response for GetCities:", e.response);

                              // log the parsed data that DropDownList will bind to
                              console.log("Parsed City List:", this.data());
                            }
                          },
                          change: function (e) {
                            // keep StartCity (name) in sync so the display template shows new text
                            var item = this.dataItem();
                            if (item && options.model) {
                              options.model.set("StartCity", item.LkupItem);
                            }
                          },
                          dataBound: function () {
                              // Ensure selected value shows when editing existing rows
                              if (options.model.StartCityID != null) {
                                this.value(options.model.StartCityID);
                              }
                            }
                        });
        }

        </script>
</asp:Content>

Thanks,

Ravi

jQuery PivotGridV2 remote flat data wont load

Hi,
I’m moving from PivotGrid (v1) to PivotGridV2 on Kendo UI for jQuery 2025.3.825 with an ASP.NET MVC (.NET 8) backend.
In v1 my grid called the controller just fine. In V2, the grid renders, but no data is loaded from the controller and the console keeps showing:
TypeError: Cannot read properties of undefined (reading 'cube')

If I feed local flat data, V2 renders correctly — so my fields, cube, rows/columns/measures seem fine. The problem appears only when I switch to remote flat binding.

What I expect
- PivotGridV2 (client cube / flat binding) to call my MVC action via transport.read and render the returned rows.
- Built-in Excel export to work (it does, when data is present).

What I see
- requestStart fires, then I get a transport error, followed by the “reading 'cube'” error.
- With local data injected, the table renders fine (so the cube + axes look OK).

Code :

const pg = $("#pivotgrid").kendoPivotGridV2({
  height: 570,
  columnTotals: false,
  rowTotals: false,

  dataSource: new kendo.data.PivotDataSourceV2({
    transport: {
      read: {
        url: '@Url.Action("GetPivotData", "ControllerPivot")',
        type: "POST",
        dataType: "json"
        // (also tried contentType: "application/json" + JSON.stringify in parameterMap)
      },
      parameterMap: function () {
        return {
          year: $("#yearDDL").data("kendoDropDownList")?.value(),
          periode: $("#periodDDL").data("kendoDropDownList")?.value()
        };
      }
    },

    schema: {
      // if server returns { data:[...] } I can switch this on:
      // data: "data",
      model: {
        fields: {
          Version:   { type: "string" },
          Period:    { type: "string" },
          Parameter: { type: "string" },
          Value:     { type: "number" }
        }
      },
      cube: {
        dimensions: {
          Version:   { dataMember: "Version" },
          Period:    { dataMember: "Period" },
          Parameter: {
            caption: "Parameter",
            hierarchies: [{
              name: "By Parameter",
              levels: [{ name: "Parameter", field: "Parameter" }]
            }]
          }
        },
        measures: {
          Value: { field: "Value", aggregate: "sum", format: "{0:n2}" }
        }
      }
    },

    columns:  [{ name: "Version",   expand: true }],
    rows:     [{ name: "Parameter", expand: true }],
    measures: ["Value"],

    requestStart: e => console.log("[requestStart]", e),
    requestEnd:   e => console.log("[requestEnd]", e),
    error:        e => console.error("[transport error]", e)
  })
}).data("kendoPivotGridV2");

$("#configurator").kendoPivotConfiguratorV2({
  dataSource: pg.dataSource, updateOnApply: true, filterable: true, height: 570
});

Is there a minimal working example for jQuery PivotGridV2 remote flat binding on 2025.3.825 I can compare with?

Environment

Kendo UI for jQuery 2025.3.825
PivotGridV2 + PivotConfiguratorV2
ASP.NET MVC (.NET 8) backend

How to control scrollbar option per dataSource size in a kendoGrid control

Hi,

Would like to dynamically control whether a grid has a slider control for the roles.

The algorithm /flow would look something like this:

grid is declared and options initialized within windows.onload or $(document).ready(function() {});

user makes selection to load grid

data populates the datSource from an API request.

if(dataSource.length > 10 )
then let scrollable = true;
else
scrollable = false;

The idea here is it would dynamically adjust that scrollable option after a certain length threshold would be met.

attached here is how I have my grid set up..also I have the sort and dataBound handlers doing stuff.

Here is inline version of JavaScript / jQuery kendo code that declares and does some initialization:

 $("#myGrid").kendoGrid({
     width: 1400,
     height: 500,
     sortable: {
         mode: "single",
         allowUnsort: false
     },
     resizable: true,
     editable: true,
     scrollable: true,
     columns: modifiedColumns, // Use updated columns
     dataSource: mappingsDS,
     selectable: "multiple, row",

Thanks,

George

There is no DataSource Model Id property specified.

Hi,
I'm new to KendoUI, and I created a grid in a view to list all instances of my model (StopLocation) and it works fine, except when adding the .Selectable() line to enable multiple selection, I get an error: "There is no DataSource Model Id property specified.". Anybody knows how to define id for this grid? Or is there something wrong with .Selectable() syntax below?

@( Html.Kendo().Grid((IEnumerable<Route.StopLocation>)ViewData["Stops"])

.Name("selectedStops")

.Columns(columns =>

{

columns.Bound(p => p.StopNo).Title("Stop No.");

columns.Bound(p => p.Id).Title("ID");

columns.Bound(p => p.StopLocation).Title("Stop Location");

})

// .Selectable causes NotSupportedException: There is no DataSource Model Id property specified.

.Selectable(s => s.Mode(GridSelectionMode.Multiple))

)

Thanks in advance.

File Manager breadcrumbs navigate is incorrect

Suppose my breadcrumb is Home > LocalData > WebFile > Tools. When I click the breadcrumb 'WebFile', it navigates to Home.

js:

C#:

public void ReadFiles(HttpContext context)
{
try
{
List<FolderFileInfo> FolderFileInfoList = new List<FolderFileInfo>();

string FolderPath = RootPath;
if (!string.IsNullOrEmpty(context.Request.Form["target"]))
{
FolderPath = RootPath + context.Request.Form["target"];
}

foreach (string dir in Directory.GetDirectories(FolderPath))
{
var di = new DirectoryInfo(dir);
FolderFileInfoList.Add(new FolderFileInfo
{
name = di.Name,
isDirectory = true,
hasDirectories = di.GetDirectories().Length > 0,
path = di.FullName.Replace(RootPath, ""),
size = 0,
created = di.CreationTime,
modified = di.LastWriteTime
});
}

foreach (string file in Directory.GetFiles(FolderPath))
{
var fi = new FileInfo(file);
FolderFileInfoList.Add(new FolderFileInfo
{
name = fi.Name.Replace(fi.Extension, ""), // 不能帶副檔名
isDirectory = false,
hasDirectories = false,
path = fi.FullName.Replace(RootPath, ""),
extension = fi.Extension,
size = fi.Length,
created = fi.CreationTime,
modified = fi.LastWriteTime
});
}

context.Response.StatusCode = 200;
context.Response.ContentType = "application/json";
string json = JsonConvert.SerializeObject(FolderFileInfoList);
context.Response.Write(json);
}
catch (Exception ex)
{
context.Response.StatusCode = 500;
context.Response.ContentType = "application/json";
context.Response.Write(JsonConvert.SerializeObject("讀取失敗!"));
}
}

public class FolderFileInfo
{
public string name { get; set; }
public bool isDirectory { get; set; }
public bool hasDirectories { get; set; }
public string path { get; set; }
public string extension { get; set; }
public long size { get; set; }
public DateTime created { get; set; }
public DateTime modified { get; set; }
}

Spreadsheet render function not firing in 2025.3.825

In the latest version 2025.3.825, the render function doesn't fire after the spreadsheet is rendered.

See this dojo as an example: https://dojo.telerik.com/FQeIFBMD

Kendo (jQuery) context menu does not work when using a filter

Hello all,

I have been using Kendo for quite a while now. As of recently our team decided to upgrade the Kendo version our software is using. We upgraded from Kendo 2022 to Kendo 2025. This was quite an upgrade, so we spent a lot of time fixing bugs and visual problems. Luckily, we managed to get it all up and running, until today.

Our software uses context menu's. When setting these up we define a target and also a filter within. In the case of the problem we are facing, we are using a context menu for a treeview with items. So we target the treeview, and filter on specific treeview items. That way a context menu will only appear if you specifically right-click an item in the treeview.

Since the upgrade, no context menu appears. Whenever we remove the filter from the context menu options, a context menu does appear. This is not what we are looking for, because we only want to trigger a context menu on treeview items. Hence we need the the filter option. I added a breakpoint in the Kendo source code where the code checks if the target element matches with the given filter in the options. To my surprise, the code continues as expected and calls the "open" method on the context menu. Still, there is no context menu visible. I have tried all sorts of filters, even a star-selector (*), which should match all elements. Even with that, it does not work.

It looks like in both cases (with or without a given filter) the code goes through the sameflow. However, as soon as there is a filter present, no context menu appears.

this.treeViewContextMenu = $("#treeViewContextMenu").kendoContextMenu({
                dataSource: [
                    {text: "Item toevoegen", attr: {action: "addNewItem"}},
                    {text: "Hernoemen", attr: {action: "rename"}},
                    {text: "Verwijderen", attr: {action: "delete"}}
                ],
                target: ".tabstrip-treeview",
                filter: '.k-treeview-leaf-text',
                open: this.onContextMenuOpen.bind(this),
                select: this.onContextMenuSelect.bind(this)
            }).data("kendoContextMenu");

Does any of you guys know what might be wrong? Am I approaching it incorrectly? Thank you!

Kendo jQuery PivotGrid: Show hierarchy levels in Fields hai to

I have a lot of projects with kendo grids in them. As a matter of practice, I always call the same function on the dataBound event.hap

Barcode - width not enough generate rough result

HI

I have test the Kendo UI Barcode and have found some problems.

。The Barcode result will become rough while width does not enougth (even if renderAs: "canvas" or "svg").
(see Image1 - rough result)

。Larger width will cause error (even if height is greater then the suggested value) :

$(container).find("#gudbrands").kendoBarcode({
value: "1234567890" ,
type: "code39",
width: 580,
height: 100
});

Uncaught Error: Insufficient Height. The minimum height for value: 1234567890 is: 87

at o.prepareValues (kendo.all.min.js:97)

at o.addData (kendo.all.min.js:97)

at o.encode (kendo.all.min.js:97)

at init._render (kendo.all.min.js:97)

at init.createVisual (kendo.all.min.js:97)

at init.redraw (kendo.all.min.js:97)

at init.setOptions (kendo.all.min.js:97)

at new init (kendo.all.min.js:97)

at HTMLDivElement.<anonymous> (kendo.all.min.js:26)

at Function.each (jquery-2.2.4.min.js:2)

My questions :
1.Could Barcode could auto size by itself ?
2.The height of the Barcode should not be limited(see Image2 - long code39)

Best regards

Chris

Weird kendo drawing drawDOM behaviour

Currently I'm using kendo ui version -> 2022.3.1109

I want to download pdf from html so here's my simple code.

<body>
  <div id="pdf-scope">
    <p>
        Assignment Order - <strong>Interview</strong> - Review & Submit
    </p>

    <p>
        Assignment Order - <span class="bold-text">Interview</span> - Review & Submit
    </p>
  </div>

  <button id="btn-download-pdf">
    download
  </button>

</body>
</html>

<script>
  $("#btn-download-pdf").on("click", () => {
      let pdfDom = $("#pdf-scope");
    
      kendo.drawing.drawDOM(pdfDom, {
          /*margin: "2px",*/
          paperSize: "A4",
          scale: 0.4,
          margin: 50,
          keepTogether: ".prevent-split",
          forcePageBreak: ".page-break",
          landscape: true,
          multiPage: true
      }).then(function (group) {
          kendo.drawing.pdf.saveAs(group, "Interview.pdf");
      });
  });
</script>

Everything's fine on html view, here is the view I tried:

Until I clicked the pdf button, a strange result shown in downloaded pdf

The question is why this is happened ? Is it something wrong with my code ?I know the problem is not bold style but the tag inside <p> is being recognized as tab character, fyi I also tried another workaround such putting 2 div in-line and gave me the same result.

How to get category out of a Donut chart

Helllo

I have a Donut chart working well (see attachment). When I hover over it the category shows its tooltip. I would now to make the Donut clickable. When I click on a category an event would let me know the clicked category for taking further actions. Is something like that possible?

All Day Event rendering not working after upgrade.

I'm working with the kendo Scheduler in the context of a Dynamics 365 (v9) integration. The scheduler is bound to appointment entities. Our original implementation worked with a 2014 version of the Kendo scheduler, but when upgrading to Kendo 2025.2.702, the "all day" integration has changed. In setting the "All Day Event" checkbox in D365:

We do NOT have the appointment rendered in the All Day Slot on the calendar, rather it is rendered as an all day appointment (8-5).

I'm not sure where to put hooks in change that! There is an edit handler coded in (as part of the scheduler configuration) but it is never triggered. Here is the configuration for the Kendo Scheduler:

Not sure where to go next with this.

Thanks!

Kendo UI Tooltip not reflecting the correct message

I am using a scenario where the tooltip shows for each textbox based on its title property, but the tooltip is not showing the correct message probably because the kendo ui library is changing it.

When you click the Submit button, then the title of each textbox is being set based on whether the textbox has a missing value. After clicking Submit button, if you focus into any textbox you will see that its title is set to empty string. I am showing the latest values of the title of each textbox on load event and also on focus, mouseenter and blur of each textbox.

The code sampe is at https://dojo.telerik.com/CZauQXvf

I have two questions.

How can the tooltip show the message based on the lastest title of the textbox? This is not happening. If you input a value into any textbox and click Submit then the title of that textbox is being set to empty, but the tooltip for that textbox still shows the old message.
How can the tooltip be not shown when there is no content in it i.e. title value of the textbox is an empty string? Right now its showing an empty tooltip.

kendo.drawing.drawDOM question

Hi,

I am using Font Awesome in my website, and i use kendo.drawing.drawDOM to export the content of browser to save as PDF.

I have no issue when using Font Awesome v6.x, but after upgrade to v7, it throws exception as below:

Uncaught Error: Table loca not found in directory
    at Directory.readTable (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:42392:19)
    at TTFFont.parse (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43552:25)
    at new TTFFont (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43544:18)
    at kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43844:32
    at XMLHttpRequest.<anonymous> (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43823:21)

$(document).on({
    "click": function (e) {
        e.preventDefault()
        // Embed external fonts into pdf
        kendo.pdf.defineFont({
            "Font Awesome 7 Brands":
                "/fonts/FontAwesome/fa-brands-400.ttf",

            "Font Awesome 7 Free":
                "/fonts/FontAwesome/fa-regular-400.ttf",

            "Font Awesome 7 Solid":
                "/fonts/FontAwesome/fa-solid-900.ttf",

            "DejaVu Sans":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans.ttf",

            "DejaVu Sans|Bold":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",

            "DejaVu Sans|Bold|Italic":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",

            "DejaVu Sans|Italic":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
        })
        kendo.drawing.drawDOM($("#Body"), {
            landscape: false,
            paperSize: "B2",
            margin: "2cm",
            forcePageBreak: ".page-break"
        }).then(function (group) {
            kendo.drawing.pdf.saveAs(group, siteShortName + "-Snap-" + new Date().getTime() + ".pdf")
        })
    }
}, "#Snap")

Do you able to tell what may cause the error? I am using online free font converter to convert woff2 to ttf as v7 no longer provide ttf. v7 is now using css variable.

Thanks.

Kendo jQuery PivotGrid: Show hierarchy levels in Fields

I want to compare two data types side-by-side in one PivotGrid. Conceptually the Fields tree should look like:

Field

DATA 0
├─ Area Data 0
└─ Period Data 0

DATA 1
├─ Area Data 1
└─ Period Data 1

Measures
• Value Data 0
• Value Data 1

Then on Columns I’d place Area → Period under DATA 0 (and/or DATA 1) to get a hierarchical header.

Question

Is showing expandable hierarchy levels in the Fields panel supported with client-side data?
If yes, what’s the correct schema?
If not, what’s the recommended approach (e.g., model each level as its own dimension), and would PivotGrid v2 change this?

Product & version

Kendo UI for jQuery – PivotGrid (classic, not v2)
Reproduced on CDN builds 2023.2.718 and 2024.2.514
Browser: Chrome (latest)

Call Function on DataBound of Every Instance of Widget

I have a lot of projects with kendo grids in them. As a matter of practice, I always call the same function on the dataBound event. Instead of adding this every time I initialize a widget, I would like to set it as a default so that any time I initialize a kendo grid, it is already set. I don't want to give up the ability to add additional functions to specific grids though. Is this possible?

Why turn the samples into such a mess??

Just needed to check a quick example for reference and I've discovered all the samples have been rewritten to include a bunch of fluff. Here is the new example for the textbox. THE TEXTBOX... this is the example??? Who thought this was a good idea? It seems like someone was given a task to make sure the examples are up to date and some very eager beaver who jumps on every new web dev bandwagon but loses sight of what the end user experience is like, or their fellow coding team members. I have always told people 'and telerik has good documentation and examples' but I can't honestly say that now. After using it for 15 years, I'm so disappointed in what happened to kendo.

Reminder, this is the first example for kendo text box:

<body>
    <div class="demo-wrapper k-d-grid k-gap-8 k-flex-1 k-px-8 k-pt-7">
    <div data-role="skeletoncontainer" class="side-container k-skeleton k-opacity-20 !k-d-flex k-flex-col k-align-items-center k-px-5 k-pt-7.5 k-rounded-tl-md k-rounded-tr-md" aria-live="polite" aria-label="Loading...">
        <span class="k-skeleton k-opacity-80 k-skeleton-circle k-w-18 k-h-18 k-mb-5"></span>

        <div class="k-d-flex k-flex-col k-align-items-center k-gap-1">
        <span class="k-skeleton k-w-24 k-h-4 k-rounded-md"></span>
        <span class="k-skeleton k-opacity-80 k-w-14 k-h-2.5 k-rounded-md"></span>
        </div>

        <div class="k-d-flex k-flex-col k-w-full k-mt-13 k-gap-4">
        <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        </div>

    </div>

    <div class="main-container k-pb-8 k-d-flex k-flex-col">
        <div class="k-d-flex k-gap-3 k-align-items-center k-mb-5">
        <span class="avatar !k-d-none k-skeleton k-opacity-30 k-skeleton-circle k-w-12 k-h-12"></span>
        <h4 class="k-h4 k-opacity-20 k-font-bold">My Profile</h4>
        </div>
		<span class="k-d-inline-block">Name</span>
        <input id="textbox" />

        <div class="k-d-flex k-flex-col k-gap-1 k-mt-5">
        <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
        <span class="k-skeleton k-opacity-30 k-rounded-md k-h-7.5"></span>
        </div>

        <div class="k-d-flex k-flex-col k-grow k-gap-1 k-mt-5">
        <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
        <span class="content-expanded k-grow k-skeleton k-opacity-30 k-rounded-md k-h-20"></span>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // create TextBox from input HTML element
        $("#textbox").kendoTextBox({
            value: "John Smith",
            clearButton: true
        });
    });
</script>

<style>
    .demo-wrapper {
        grid-template-columns: 180px 1fr;
    }

    .k-h4 {
        line-height: 26px;
        margin-bottom: 0;
    }

	.kd-nodata-wrapper{
		display: block !important;
		padding-top: 20px !important;
	}

    /* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
    @media (max-width: 678px), (min-width: 821px) and (max-width: 1038px), (min-width: 1241px) and (max-width: 1328px) {
      .demo-wrapper {
        grid-template-columns: 1fr;
      }

      .avatar {
        display: block !important;
      }

      .side-container {
        display: none !important;
      }

      .main-container {
        padding-bottom: 0;
      }

      .content-expanded {
        border-end-end-radius: 0;
        border-end-start-radius: 0;
      }
    }

    /* Breakpoint for full screen demo: max:359px */
    @media (max-width: 476px) {
      .avatar {
        width: 32px;
        height: 32px;
      }
    }
</style>


</body>

(p.s., the list of tags to select from when submitting a question aren't in alphabetical order. Who is making these decisions???)