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