Search code examples
checkboxkendo-uikendo-treeviewkendo-mvvmkendo-template

kendoUI MVVM - TreeView with checkbox template


I need to use KendoUI TreeView with MVVM (declarative) binding, and I need to show checkboxes only for some nodes, based on a field in the model.

For this, I want to use checkbox template

However, whatever I do it seems I cannot make it work

Here is the fiddle with the treeview bound through MVVM but without checkbox template

What I want is to use the function checkTemplate as checkbox template, by defining the treeview as below

<div class="files"
    data-role="treeview" 
    data-text-field="name"
    data-spritecssclass-field="type"
    data-checkboxes="{checkChildren: true, template: checkTemplate }"
    data-bind="source: files"
    data-template= "ktmpl_Files">
</div>

However, it doesn't work. Does anyone has any idea what is wrong?

Thanks


Solution

  • The template function used for checkboxes is invoked in a context where your "checkTemplate" function is not visible. Define it global:

    <script type="text/javascript">
        function checkTemplate(e) {
            return "<input type='checkbox' style='display: " + (e.item.checkable ? "inline" : "none") + "'/>";
        }
    </script>
    

    Check it here: http://jsfiddle.net/OnaBai/K6cbc/5/