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

How to achieve Treeview template bindings

3 Answers 325 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Klaus
Top achievements
Rank 1
Klaus asked on 16 Dec 2012, 04:36 PM
I have having a tough time figuring out how to achieve simply bindings in a tree view template:

This is my requirement:

- Bind checkbox of each node to an isVisible property on the node's underlying view model.  
- Bind click action of delete button to a method called remove() on the node's underlying view model.   

Treeview is bound to an underlying hierarchical datasource.  Items in datasource are created and added dynamically like this:


        createCategoryLegendModel(viewModel) {             
             return {
                 text : viewModel.label,
                 imageUrl:  this.url + viewModel.imagePath,  
                 expanded : true,                                    
                 viewModel: viewModel,
                 callme: function () { alert("view model called"); },  // test method            
                 layers :  [] 
             };
         }

dataSource.add(createCategoryLegendModel(viewModel));

This is the template I have:

<script id="treeview-template" type="text/kendo-ui-template">           
        <input type="checkbox" data-bind="checked : item.viewModel.isVisible" style = "margin-left:-5px"></input>                 
        <img data-bind="click : callme" title="click to remove"  src="@Url.Content("~/images/delete.png")" style ="margin-top:0px; height:16px; width:16px"/>          @* or item.viewModel.remove, which ever I can get to work *@
        <span> #: item.viewModel.label #</span>                    
        <span data-bind="text : text"> </span>          @* why does this not work *@    
</script>


Now, your checkbox example, shows how to render, but does not show us how to bind to an underlying view model.  So it does not really help me much.  Your  templates shows me how to render a button, but not how to bind its click to an underlying view model method yet these are things easily done using Knockout.   Also, I the way you bind click actions on the delete button in your templates sample, is susceptible to performance problems and breaks down my MVVM strategy.

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 19 Dec 2012, 06:54 AM
Hi Klaus,

 
To achieve the desired behavior you can attach Click event to all checkboxes which calls a function to get the current DataItem of the current checkbox closest "<li>" element and use the Set method to update the underling model property:

$("#treeview :checkbox").each(function() {
    $(this).bind("click", function() {
        if($(this).attr("checked"))
        {
            currentDataItem = $("#treeview").data("kendoTreeView").dataItem($(this).closest("li"));
            currentDataItem.set("checked", true);
        }
        else
        {
            currentDataItem = $("#treeview").data("kendoTreeView").dataItem($(this).closest("li"));
            currentDataItem.set("checked", false);
        }
    })
})

 Also you can delete nodes using Remove method for example on selected nodes:
<button onclick="deleteSelectedNode()"> delete selected node </button>
 
<script>
    function deleteSelectedNode()
    {
        treeView = $("#treeview").data("kendoTreeView");
        treeView.remove(treeView.select());
    }
</script>

For convenience I created small demo based on the above solution and attached it to the current thread.

Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Calvin
Top achievements
Rank 2
answered on 21 Feb 2013, 01:25 AM
I am attempting to do something similar.  I would like to bind all treeview checkboxes to each node's underlying view model's IsChecked property.  However, this exercise seems pointless--in my situation at least--since the data is already maintained in the treeview's checkboxes.  If each node were to be event-bound using the approach outlined here, there would be a lot of extra binding taking place each time a parent node's children were refreshed (especially so when there are lots of child nodes).

My motivation for trying this technique is to workaround the issue outlined here:
http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=661314

I am attempting to re-check some child nodes after the branch is refreshed from the server.  Other techniques that I've tried have so far failed to do the trick.  Therefore I thought I would trying including an IsChecked property in each node's model.  But since two-way checked model binding is not supported for nodes and also since I will occasionally have parent nodes with a 100 or more child nodes, this approach doesn't seem especially desirable either.
0
Klaus
Top achievements
Rank 1
answered on 21 Feb 2013, 04:31 PM
This is one area, I think that needs some rethinking.  To achieve such an effect is overly cumbersome especially when one can easily achieve the same thing just using KnockOutjs, which is what I ended up doing.  

Tags
TreeView
Asked by
Klaus
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Calvin
Top achievements
Rank 2
Klaus
Top achievements
Rank 1
Share this question
or