Panel Bar Tester Add/Remove

by grippstick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<div id='container'>
    <ul id='panelBarClaimType' data-role='panelbar'></ul>
    <button data-bind='click:clickAdd'>add</button>
</div>

    <script id="templateParent" type="text/x-kendo-template">
        
        <li><span data-bind='text:Name'></span> 1
            <div>
        <span data-bind='text:Name'></span> 1
                #console.warn(data);#
                <ul data-bind='source:children' data-template='templateChildren'></ul>
    <button data-bind='click:clickRemove'>remove</button>
            </div>
         </li>
    </script>
    <script id="templateChildren" type="text/x-kendo-template">
        <li><span>#=data#</span></li>
    </script>

JavaScript

var $panelBarClaimType = null;

var vm = new kendo.observable({
    items: [],
    clickAdd: function (e) {
        //console.warn(vm.items);        
        var $full = $('<div></div>');
        
        var item = {
            Name: new Date(),
            children:[1,2,4],
            clickRemove:vm.clickRemove
        };
        
        item.index = vm.items.length ;
        
        
        vm.items.push(item);
        
        
        var content = kendo.template($('#templateParent').html())(item);
        
        var $tmpDiv = $('<div></div>');
        
        $tmpDiv.append(content);
        
        $full.append($tmpDiv.children());
        
        var $panels = $full.children();
        
        $panelBarClaimType.append($panels);
        
        
        //this binds the items we just created so the click functions work
        kendo.bind($panels, item);
    },
    clickRemove: function (e) {
        var $li = $(e.target).closest('li');
        var index = $li.index();
        var item = vm.items[index];
      
        console.warn(item);
        
        vm.items.remove(item);
        
        //$li.remove();
        console.warn(vm.items);
    }
});

kendo.bind($('#container'), vm);

$panelBarClaimType = $('#panelBarClaimType').getKendoPanelBar();