DropDownTree does not return all IDs

[Jerry]

We have a Vuejs app that is using the Kendo DropDownTree control, with checkboxes, to display a hierarchy of data.

The problem is, there is a difference with how the control returns the checked IDs when the parent node is expanded VS collapsed.

To illustrate the problem:

Both parents nodes below have 2 child nodes.

Parent1 happens to be expanded. If I check parent1, the control then checks child1+child2 automatically. And the "@change" function sends all three IDs. This is the desired affect.

Parent2 has 2 child nodes. But the child nodes can't be seen because parent2 is collapsed. When Parent2 is checked, the "@change" only sends parent2 ID. The child Ids are NOT sent. Why is this? Why the difference vs parent1 example?

Also, the child nodes for parent2 do get checked properly by the control. I can see this if I expand parent2. The child nodes IDs just never got sent to the "@change" when it's parent2 was clicked and collapsed.

 

 _parent1
    -child1
    -child2
 _parent2

 

Is there a way to get all the checked IDs from "$event.sender._values" whenever any node is checked?

Here is how my dropdowntree is configured along with the change function:

<dropdowntree
  :data-source="items"
  tagMode="single"
  :autoClose="false"
  :checkboxes-check-children="checkChildren"
  :check-all="true"
  :placeholder="placeholder"
  dataTextField="text"
  dataValueField="id"
  @change="onChange"
  :value="selectedItems"
  style="width: 100%"
  height="400px"
  :load-on-demand="true"
>

onChange($event) {
let vm = this
vm.$emit('onHierarchyChange', $event.sender._values)
}

 

[Petar]

Hi Jerry,

I am afraid that the issue is related to what we've already discussed in this forum thread. The check-children functionality is not fully operational/compatible when the DropDownTree works in load-on-demand mode.

The reason why you get only the "Parent2" id when the change event is triggered is that its children are still not available in the DropDownTree. If, for example, you expand the "Parent2" node and then check it, you will have the same behavior as with "Parent1".

Try the described above scenario of first expanding "Parent2" and then checking its checkbox. 

I am afraid that with the current implementation of the DropDownTree, we cannot provide a solution for the proper working of the combination of check-children and load-on-demand props.

Let me know if you think I can help you with something else related to the current discussion.

Regards,
Petar
Progress Telerik

[Jerry]

-Is there a plan to enhance the "load-on-demand" property so that the performance it offers will not interfere with "check-children"? If it could also be enhanced to check the boxes and display the label "9 item(s) selected" when the form is being populated, as if the user is editing the form.

-Is there a way to expand each node in the entire tree when the user clicks on the control to open it?

-It looks like we won't be able to take advantage of the "load-on-demand" performance. Can you provide an example of using a loader?

 

 

[Petar]

Hi Jerry.

Below are the answers to your questions:

Q1: The requested functionality will be available once it is implemented in the Kendo UI for jQuery. What you can do is to vote for this feature request. The more votes the request collects, the bigger the chance for the implementation of the component to be.

Q2: Can you please specify if you want all DropDownTree nodes to be initially expanded or what you want is to have all subnodes expanded once a given parent node is expanded?

Q3: Here is a StackBlitz example demonstrating how we can control the visibility of the Loader component using the requestStart and requestEnd events of the DropDownTree's DataSource.

I hope the above links will help you achieve what you need in your application.

[Jerry]

Q2: When a user clicks on the dropdowntree, currently the control opens and the first node is visible and collapsed.

Is there a way when the user clicks the dropdowntree to have every node visible? All child nodes are visible in each parent node. The load-on-demand seems to work better when all the nodes are visible.

For example, if I click the control, I want to see:

-All

  -parent 1

    -child 1

    -child 2

-parent 2

  -child 3

  -child 4

 

Can this be done?

 

 

 

[Petar]

Hi Jerry, 

Here is an example demonstrating how the targeted functionality can be implemented. To achieve it, we are using the open event of the DropDownTree and the below code:

onOpen() {
    const dt = this.$refs.ddt.kendoWidget();
    dt.treeview.expand('.k-item');
}

No matter that the above example is working, I don't think this approach will help you bypass the waiting of the remote call completion and the nodes' rendering.  By expanding the different nodes, we are actually making requests to the remote server.

Let me know if you have additional questions.