Telerik Forums
Kendo UI for jQuery Forum
1 answer
13 views

When I select initialize a kendoDropDownTree with checkboxes set to true, I experience all kinds of odd behavior visually. Inspecting the code shows that it is now a MultiSelectTree and not a DropDownTree yet there is no documentation and little support for this somewhat hidden component. I would actually prefer to have a MultiSelectTree without the checkboxes similar to a multiselect but with the grouping. 

One issue, is that it does not respect the global settings for the corner radius of the box. 

kendo.ui["DropDownTree"].fn.options["rounded"] = "none";

kendo.ui["MultiSelect"].fn.options["rounded"] = "none";

These seem to do nothing. When I guessed at "MultiSelectTree", I got a console error. 

Another issue is that the UI looks very different from the regular multiselect and it doesn't seem to apply the .k-selected class as expected. When I check a box, the aria-checked is true but the k-selected class is not applied, this makes the item remain white rather than getting the blue background like it does in a regular multi-select. Can we get some consistency there?

Expanding an element does not change the height of the k-child-animation-container. It does show on the screen, but any styling targeting the container will not work because the container does not expand to fit the content. 

 

I made my dropdown arrows 7px wider (k-treeview-toggle). Now the autoWidth makes the list 7px wider than the input element.

Neli
Telerik team
 answered on 10 Jun 2025
0 answers
46 views

Hello,

I'm currently  creating a treeview page using kendo JQuery.

I want to make it so that when a child node is selected, the parent node is selected.

I found this page, https://docs.telerik.com/kendo-ui/knowledge-base/check-nodes-programmatically, and tried to this properties.

 var treeview = $("#tree").data("kendoTreeView");

    var bar = treeview.findByText("Bar");

    treeview.dataItem(bar).set("checked", true);

 

But, 'menuAuth.js:299 Uncaught TypeError: Cannot read properties of undefined (reading 'findByText')' was printed on the console.

also, parent cannot be read.

'menuAuth.js:301 Uncaught TypeError: Cannot read properties of undefined (reading 'parent')' is printed on console too.

 

I really need to make parent node selection.

 

please let me know how can I use this things.

Thanks,

Jieun

 

Jieun
Top achievements
Rank 1
 asked on 28 Oct 2024
1 answer
77 views

Hello, I have noticed some changes on the structure of the Treeview component after version 2024.1.319 March 18, 2024

Classes like k-group and k-in seem to have been removed completely

For example, in previous version, the structure of a Treeview component would look like this:

<ul class="k-group k-treeview-group">
	<li class="k-treeview-item">
		<div class="k-treeview-top">
		         <span class="k-treeview-leaf k-in">TEST STRING</span>
		</div>
	</li>
</ul>

while now it would look like this:

<ul class="k-treeview-group">
	<li class="k-treeview-item">
		<div class="k-treeview-top">
			<span class="k-treeview-leaf">
				<span class="k-treeview-leaf-text">TEST STRING</span>
			</span>
		</div>
	</li>
</ul>

On release notes, I did not find any particular reference on these classes being removed

So my questions are:

  1. Have they been removed widely?
  2. Are there any other components that may still use these classes?
  3. Is there any form of documentation that contain these changes?

Thank you in advance

Martin
Telerik team
 answered on 04 Oct 2024
1 answer
144 views

I have followed all the examples but nothing is overriding the default theme.  I even tried to change it in after everything is loaded inside my done routine.

 

function createTreeView(dataURL,divName) {
    $.ajax({
        type: 'GET',
        url: dataURL,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {},
        error: function (request, error) {
            console.log(error);
        }
    }).done(function(data) {
         ds = new kendo.data.HierarchicalDataSource({
            data: data,
            schema: {
                model: {
                    id: "taskid",
                    children: "items",
                    hasChildren: "haschildren"
                }
            }
        });    
        $("#"+divName).kendoTreeView({
            dataSource: ds,
            dataTextField: "taskname",
            dataUrlField: "linkto"
        });
        $('.k-treeview').css('background', 'lightblue');
    })// end done
}

 

 

Neli
Telerik team
 answered on 25 Jun 2024
1 answer
68 views

We are currently experiencing a rendering issue with the KendoUI TreeView component, version 2019.2.703, on Project Server Online. This problem arose following a recent update to Project Online, which introduced a change in how the WebComponentsIcons font, used for icon rendering, is managed in the cloud environment.

 Issue Details:

Previously, the grid component functioned correctly. However, after the update, labels in combo boxes that contain hierarchical items (years and months in our case) are not displaying correctly. Specifically, the label for the year is now rendering "behind" he checkbox and is only partially visible within the interface.

 See attachment: TreeView_err1.png

Attempted Fixes and Complications:

We attempted a solution that successfully made the year label visible again modifying the style of the class .k-treeview .k-in (setting the Font Family and size).

.k-treeview .k-in {
    border-radius: 0;
    margin: 0;
    padding: 4px 8px;
    border: 0 solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    align-content: center;
    vertical-align: middle;
    position: relative; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
  }

However, this adjustment led to an unintended change in the Document Object Model, and an empty <span> cover the checkbox and partially blocked the selection of the checkbox.

See attachment: TreeView_err2.png

To avoid the conflict between the checkbox and the empty span we modified the style of the .k-icon class changing the display from inline-block to display: contents;

Now, the trigger, originally on the triangle icon for showing/hiding child items (months), is incorrectly positioned above the checkbox for selecting the year. This results in all child items being expanded and displayed when the parent is selected, which is not the desired behaviour.

 See attachment: TreeView_err3.png

Attachments:

Please find attached screenshots for a better understanding of the issues described.

Request:

Could you please investigate this behaviour? Any suggestions on how to correct the year label rendering without affecting the functionality of the child item display would be greatly appreciated.

Martin
Telerik team
 answered on 17 May 2024
1 answer
57 views

Hi, with angular Kendo 14++ we lost the Icon Class. But now how I can  cutomize treeview custom drag template?

I whant to add the k-i-cancel icon on some specific node. In the pass I was using:

<ng-template kendoTreeViewDragClueTemplate let-action="action" let-sourceItem="sourceItem"
    let-destinationItem="destinationItem" let-text="text">
    <span class="k-drag-status k-icon" [ngClass]="getDragStatus(action, sourceItem, destinationItem)"></span>
    <span>{{ text }}</span>
</ng-template>

 

Then in the getDragStatus I can do the logic and push the correct icon in ngClass.

For now I remove the template because I lost all the other icon like (add, insert, ... )

Its just for visual help, because I validate the drop in the "nodeDrop" fonction.

Thanks

Yanmario
Telerik team
 answered on 01 May 2024
1 answer
55 views

Is there a way to expand disabled nodes in the treeview component? There was a solution (https://www.telerik.com/forums/expand-disabled-nodes) but with the current version of kendo-ui it does not work anymore.

It seems that the expand/collapse icon is now disabled as well and it does not fire any event. Is there another solution to make this work again?

Nikolay
Telerik team
 answered on 07 Mar 2024
2 answers
249 views
A while back we created a TreeView with drag and drop. The drag event handler selectively calls e.setStatusClass("k-i-cancel") to disable the drop operation. In the drop event handler,  e.valid used to be set to false when this happened. We are now using Kendo version 2023.3.1010 and e.Valid is always true. Something appears to be broken now. Is there some kind of fix for this? I've tried to implement the same selective disabling logic in the drop event handler as in the drag event handler, but part of the logic involves looking at the value of e.statusClass which doesn't exist in the drop event.
Bryan
Top achievements
Rank 1
Iron
 answered on 16 Jan 2024
2 answers
116 views
I want to integrate the Kendo UI TreeView component and Grid together such that the data in the Grid changes when interacting with the TreeView tabs.
Neli
Telerik team
 answered on 04 Oct 2023
1 answer
104 views

The API documentation for the TreeView shows a loadCompleted event, but I'm not seeing it in the build I'm using. 2021.3.1207

 

https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview/events/loadcompleted

 

Thanks

 

 

Nikolay
Telerik team
 answered on 22 Sep 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?