How can bind routing link in kendo ui treeview in vue js ?

[Rahul]

I am facing issue with to bind the routing link directly in Kendo UI Treeview and for more details, I have put a router-link property in not working and you can view my code below.

 

01.<div id="vueapp" class="vue-app">
02.<kendo-treeview>
03. <kendo-treeview-item text="User Setting" >
04.
05.     <kendo-treeview-item text="User" router-link ="/setting/user" >User</kendo-treeview-item>
06.     <kendo-treeview-item text="Role" router-link ="/setting/role">  </kendo-treeview-item>
07.     <kendo-treeview-item text="Password Setting" router-link ="/setting/password"></kendo-treeview-item>
08.
09. </kendo-treeview-item>
10.
11. <kendo-treeview-item text="Group Setting" >
12.
13.           <kendo-treeview-item text="Group"></kendo-treeview-item>
14.           <kendo-treeview-item text="Group setting"></kendo-treeview-item>
15.
16.  </kendo-treeview-item>
17.
18.
19.</kendo-treeview>
20.
21.   </div>

[Dimitar]

Hello Rahul,

The Kendo Treeview for Vue is a wrapper that initializes a plain Kendo Treeview widget. Thus, its templates are evaluated at runtime and the router-link elements cannot be resolved. This is described as a limitation and is documented in the following section of the documentation.

Such a behavior would be available if the TreeView component is not wrapper of the Knedo TreeView widget, but a native component that can work with the Vue instance naively. Thus, I encourage you to vote for this request here that targets implementation of native Vue components in our suite: 

• Vue Native Components.

Currently, in generating a TreView item with links can be achieved by utilizing the url option of the <kendo-treeview-item> component. Check out the following StackBlitz example where this is demonstrated.

Regards,
Dimitar
Progress Telerik

[Rahul]

Thank you very very much @Dimitar 

[Rahul]

Hello Dimitar,

 

I hope are you fine ?

I am facing an issue with kendo treeview for vuejs, i am trying to expand the treeview node  single click on node text but it is not working and it only work while I double click in node text "li".

please check my code.

<kendo-treeview @select="onSelectTreeViewItem" id="treeview">
      <li data-expanded="true">  Setting
   <ul >
         <li data-expanded="true" >
         <span><i class="mota mota-user-settings" aria-hidden="true"></i></span>User Setting
         <ul>
              <li>
                   <router-link :to ="'/settings/users'" >Users</router-link>
              </li>
               <li>
                   <router-link :to ="'/settings/roles'" >Role</router-link>
             </li>
        </ul>
   </li>
   <li data-expanded="false">
          <span><i class="mota mota-group-settings" aria-hidden="true"></i></span>Group Setting
      <ul>
           <li><router-link :to ="'/settings/groupings'" >Groups</router-link></li>
           <li><router-link :to ="'/settings/datasecurity'" >Data Seviarity</router-link></li>
     </ul>
  </li>
</ul>
</li>
</kendo-treeview>

 

[Dimitar]

Hello Rahul,

The desired behavior can be achieved by subscribing to the click event of the elements as follows:

mounted: function(){
  var tree = this.$refs.tree.kendoWidget();
  tree.element.on("click", ".k-in", function (e) {
    tree.toggle($(e.target).closest(".k-item"));
  });
}

Regards,
Dimitar
Progress Telerik

[Rahul]

Hello Dimitar

I have implement the above code but still not working for tree node expand on single click. 

Regards,
Rahul

[Rahul]

Hello Dimitar,

 

Now it is working fine.

Thank you very much

Regards,

Rahul