Telerik Forums
Kendo UI for jQuery Forum
1 answer
10 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
13 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
17 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
41 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
54 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
45 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
1 answer
42 views

Hello,

I have a huge volume of data loading in Kendo UI tree by ondemand set to true. With this feature I couldn't do a search since not all the child nodes are loaded. The current search feature only searches the loaded nodes in the tree.

I need to achieve the search feature with the ondemand set to true to satisfy the business need. Can you please help me here?

Thanks

Martin
Telerik team
 answered on 11 Aug 2023
1 answer
63 views

Hi,

I am using kendo ui treeview for sort of selectable hierarchical menu. This menu can contain pretty much data with deep tree hierarchy.

Ever since we implemented it (few years ago), we used approach suggested here:
https://docs.telerik.com/kendo-ui/knowledge-base/filter-out-search-results

This was working fine so far. However, we finally started updating things to the newer versions, and after update to 2022.2.802 this method became 3-4 times slower than before.
For example same filtering method with exactly same dataset and the same search keyword has following values:

Before update:
measure filter 0.4153999999985099

After update:
measure filter 2.279300000000745

Even this piece of code gets slower

      if (data) {
        // Re-apply the filter on the children.
        dataSource.filter({ field: "hidden", operator: "neq", value: true });
      }

(same iteration)

Old:
measure dsFilter 0.001200000002980232

New:
measure dsFilter 0.013800000000745058

Unfortunately, we cannot update directly to the latest version to test if it is better. This is because of styling braking changes which we have to address and other constraints that we have. We have to do it gradually.

Could you please advise what to do, since depending on the dataset size, filtering can last more than 7-8 seconds, and reseting filtering even longer. This basically renders the feature unusable. 

Thank you very much.

Regards, Vedad

Martin
Telerik team
 answered on 02 Aug 2023
1 answer
64 views
Is there a way to have switches instead of checkboxes (same look as the kendoSwitch control) in a TreeView as seen in the example below?



I am dynamically converting the checkboxes after the treeview initializes using a function that basically does this 
$('input[type="checkbox"]:not([data-role="switch"])').kendoSwitch()
but it seems to have a lot of quirks that we have had to work around. Does the newest version of Kendo support switches in a TreeView out of the box?
Nikolay
Telerik team
 answered on 02 May 2023
1 answer
52 views

My dataSource change handler is getting an event with with e.action set to itemLoaded, which is not one of the defined values in the API documentation.

I am wondering if this is a valid event action that I can target and the documentation is not correct, or if this is something else like a bug.

Here is a dojo. If you run it and expand the item, in the browser console you will see a couple events, the last of which is the itemLoaded event.

Georgi Denchev
Telerik team
 answered on 31 Mar 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?