How to get DropDownTree to select child nodes

[Jerry]

I'm using the kendo DropDownTree control with VueJS.

I have the control working in a component with my Hierarchy data as shown below.

When I have a parent node with 1 or more child nodes and I check the parent, how can I get all the child nodes to be checked also? Is there a prop for that?

The "check-all" only works for checking or unchecking the entire tree. I would like to check or uncheck all the children within the selected parent. Is that possible? 

    <dropdowntree

      :data-source="items"
      tagMode="single"
      :autoClose=false
      :checkboxes="true"
      :check-all="true"
      :placeholder="placeholder"
      dataTextField="text"
      dataValueField="id"
      @change="onChange"
      v-model="selectedItems"
      style="width: 100%;"
      height="auto"
      >
    </dropdowntree>    

[Petar]

Hello Jerry,

The prop you need is the checkboxes-check-children.

Here is a StackBlitz example demonstrating the usage of this property. 

I hope the suggested prop will help you implement what you need in your application.

Regards,
Petar
Progress Telerik

[Jerry]

Thanks for the response.

I believe I am missing something from the following examples. I have tried these examples in stackblitz and they work. But when I copy and paste the data, the dropdowntree control and even the methods from these examples into my vue page, they don't select child nodes.

The control works/renders on my page, but the child nodes never get checked or unchecked based on it's parent.

I am using vue@2.6.12 if that matters.

Here are the examples I follow. They work exactly how I want but I can't even get these examples to work in my vue page.

Any suggestions?

https://stackblitz.com/edit/49fyke-nw3jpc?file=src/main.vue
and
https://stackblitz.com/edit/6dnhbe-791ppt?file=src/main.vue

[Petar]

Hi Jerry. 

Check this StackBlitz example.

It uses Vue 2 and everything in it is working as expected. What I've changed compared to the previous projects is that the :checkboxes="true" configuration is removed from the DropDownTree. When the :checkboxes-check-children="true" configuration is used for the component, in Vue 2 context, you don't need the :checkboxes="true". 

See the linked example and apply the discussed changes in your application. Let me know if removing the :checkboxes="true" configuration resolves the issue.  

[Jerry]

Removing :checkboxes="true" solved my issue. Thank you so much!

[Petar]

You are welcome! I am happy to hear that the suggested configuration has helped you resolve the issue.