Approved
Last Updated: 19 Jun 2019 14:43 by ADMIN
David
Created on: 17 Jun 2019 17:32
Category: DropDownTree
Type: Feature Request
0
Allow loadOnDemand with checkChildren functionality in DropDownTree

Context:

  1. Load on demand enabled
  2. Check Children is set true
  3. Remote api call to load data.
  4. 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.

<!--BELOW IS THE CODE SAMPLE ON THIS BUG -->

<!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>

    
3 comments
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.
David
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.