How to achieve Treeview template bindings

[Klaus]

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.

[Vladimir Iliev]

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

[Calvin]

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.

[Klaus]

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.