This is a migrated thread and some comments may be shown as answers.

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

6 Answers 78 Views
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 04 Jan 2019, 11:31 AM

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>

6 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 08 Jan 2019, 09:26 AM
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: 


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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rahul
Top achievements
Rank 1
answered on 08 Jan 2019, 09:32 AM
Thank you very very much @Dimitar 
0
Rahul
Top achievements
Rank 1
answered on 02 Aug 2019, 06:16 AM

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>

 

0
Dimitar
Telerik team
answered on 05 Aug 2019, 10:13 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rahul
Top achievements
Rank 1
answered on 05 Aug 2019, 10:25 AM

Hello Dimitar

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

Regards,
Rahul

0
Rahul
Top achievements
Rank 1
answered on 05 Aug 2019, 10:36 AM

Hello Dimitar,

 

Now it is working fine.

Thank you very much

Regards,

Rahul

Asked by
Rahul
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Rahul
Top achievements
Rank 1
Share this question
or