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.
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
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:
Thank you in advance
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.
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 {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.
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:
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
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?
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