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

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

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

            
            

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.

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.

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.

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

The error says: 

A form control does not have a corresponding label.

This is the code being flagged:

<div class="k-list-filter"><span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid" type="text" autocomplete="off"><span class="k-icon k-font-icon k-i-search k-input-icon"></span>

<input class="k-input-inner" type="text" placeholder="Filter" role="searchbox" aria-haspopup="listbox" aria-autocomplete="list" tabindex="0" aria-disabled="false" aria-readonly="false" aria-controls="ddLanguageMenu_listbox">

</span></div>

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:

    function bindEventsTreeView() {
        $eventsTreeView
            .kendoTreeView({
                template: treeViewChildItemTemplate,
                dataSource: [],
                loadOnDemand: false,
                select: onEventSelect,
                expand: function (e) {
                    const treeView = $eventsTreeView.data('kendoTreeView');
                    var item = treeView.dataItem(e.node);
                    item.expanded = true;
                    treeView.setDataSource(treeView.dataSource);
                    e.preventDefault();
                },
                collapse: function (e) {

                    const treeView = $eventsTreeView.data('kendoTreeView');
                    var item = treeView.dataItem(e.node);
                    item.expanded = false;
                    treeView.setDataSource(treeView.dataSource);
                    e.preventDefault();
                }
            });
    }

template:

<script id="treeview-child-item-template" type="text/kendo-ui-template">
    # if (!item.items) { #
    <h4>
        <span class="badge badge-light">
            <span # if (item.archived) { # style="color: crimson;" # } #>
                #: item.eye #
            </span>
        </span>
    </h4>
    # } #
    <span class="ml-2"><i class="#: item.spriteCssClass #"></i> #: item.text #</span>
</script>

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? 

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