Allow loadOnDemand with checkChildren functionality in DropDownTree

Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 16 Oct 2023 22:13 by Nathan

Ray

Created on: 17 Jun 2019 17:32

Category: DropDownTree

Type: Feature Request

Allow loadOnDemand with checkChildren functionality in DropDownTree

Context:

Load on demand enabled
Check Children is set true
Remote api call to load data.
Attached sample code is using kendo services.

Issue or Scenario:

When you select the top node or checkbox, it shows 1 item(s) selected. However, when you expand and deselect child nodes or checboxes, the single tag message will removed and blank field is present.

please find below code and attached gif file, these files will give you clear understanding on the issue with dropdowntree.

<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/dropdowntree/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>

</head>
<body>
<div id="example">
<div class="demo-section k-content">
<input id="dropdowntree" style="width: 100%;" />
</div>
<script>
var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot + "/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});

$("#dropdowntree").kendoDropDownTree({
placeholder: "Select ...",
dataSource: homogeneous,
height: "auto",
checkboxes: { checkChildren: true },
dataTextField: "FullName",
clearButton: true,
checkAll: false,
autoClose: false,
tagMode: "single",
loadOnDemand: true
});
</script>
</div>

</body>
</html>

Attached Files:

kendo-dropdowntree-message-issue.gif

4 comments

Nathan

Posted on: 16 Oct 2023 22:13

Good day,

This is an issue that I have recently come across and investigated. My findings were able to spot the point of contention with the currently existing code and I also found a work around to achieve the desired behaviour as well. The issue is as follows: when the treeview binds the child data, it will eventually call the refresh function of the DropDownTree specific code of the TreeView, which calls a function called `defaultRefresh`. Inside this function there is code that will check if the parent node was checked, and also that check children is called, in this scenario it will set the checked property of the nodes that were just added to the widget. The issue lies with how this code sets the property: `item.checked = true` is the called code, when it seems that instead, when working with the observable objects in this widget, it should be calling `item.set('checked',true)`. When modified to use this call, the behaviour works as expected.

The workaround, without modifying kendo code, is to bind an event handler to the `itemLoad` event of the dataItem, depending on your scenario, you may bind one off, or for all, it is implementation specific. From the `itemLoad` even you can access the promise that will resolve after the data request is finished and the widget has run its refresh. You can then iterate over any child items returned and run the refresh for each node, this will resolve the disparity between the tag selection of the DropDownTree and the already selected items of the TreeView. There may be shorter functions you can call, but they will require more specific checking, this refresh handler does all the checks needed.

This is a code snippet showing the workaround:

dataItem.one('itemLoad', function(loadEv){
if(!loadEv.promise) return;

loadEv.promise.done(function(){
if(!dataItem.children) return;
let children = dataItem.children.data();
_.forEach(children, function(childItem) {
dropDownTree.treeview.refresh({
action:"itemchange",
field:"checked",
items: [childItem],
});
})
})
})

I hope this can clarify the current state of the DropDownTree in 2023, and how this issue can resolved. There is the possibility I am missing something related to the events following the `item.set` functionality, but there seemed to be no issues in my environment when changing the behaviour.

Regards,

Nathan

ADMIN

Martin

Posted on: 19 Jun 2019 14:43

Hello David,

I am afraid that the use of checkChildren together with loadOnDemand is not intended to be available in the DropDownTree by design. In the current scenario, when you check the parent node without expanding its children first, the widget will have only one selected item as its value. That is due to the fact that, because of the loadOnDemand functionality, the parent item is considered as the only one in the DataSource. In order to achieve the desired result, the widget would have to change it's value upon expanding the items. When the widget was developed, it has been considered that automatically changing the selected values (adding the newly retrieved items to the value of the DropDownTree) would not be suitable from user experience point of view.

I understand your concerns about the large amount of data, and you do have a point. Unfortunately I am not able to provide you with an alternative to the checkChildren functionality. What I could do is to change this thread to a feature request, so that you could cast your vote for it in our Feedback Portal. Based on the support it receives from the community, we will decide on whether to proceed with the implementation of the discussed or not.

I am sorry I can't be more helpful to you. Feel free to contact us if you have additional questions regarding Kendo.

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Ray

Posted on: 18 Jun 2019 15:32

Hi Martin,

Thank you for your response but it is a bug in Kendo UI DropDownTree.

What is the reason to load full data onto datasource, it will kills the page loading performance and we have hundreds of hierarchy data.

I dont want to compromise on loadondemand. Can you give me an alternate solution to achieve checkchildren functionality?

My suggestion:

Instead of documenting that constraint in Kendo UI. I request you to raise a ticket to fix it. In practical scenario, It is necessary if it has hundreds of hierarchy data with thousands of root nodes.

ADMIN

Martin

Posted on: 18 Jun 2019 15:01

Hello David,

Thank you for the detailed explanation of the issue. In order for the checkChildren to work correctly, the DataSource of the widget has to be fully loaded. That's why enabling both checkChildren and loadOnDemand configurations leads to the undesired behavior.

Since the above explanation is nowhere to be found in our DropDownTree documentation, I am upgrading your Telerik Points as token of gratitude. The documentation will also be updated to avoid any further confusion.

Please don't hesitate to contact us if you have further questions.

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.