Rebinding of treeview

by gyoshev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://gyoshev/kendo/live/js-deploy/kendo.all.js"></script>
<div id="treeview"></div>

<button class="k-button" id="rebind">Rebind</button>

CSS

body {
    font: 12px/1.5 Tahoma,sans-serif;
}

JavaScript

var treeview = $("#treeview").kendoTreeView({
        dataSource: getData(),
        select: function() { alert("initial select"); }
    });

$("#rebind").click(function(e) {
    e.preventDefault();
    
    // clear the treeview and unbind handlers
    var kendoTree = treeview.data("kendoTreeView");
    kendoTree.remove(".k-item");
    kendoTree.unbind("select");
    
    // bind new data and add handler
    kendoTree.append(getData());
    kendoTree.bind("select", function() { alert("rebound select"); });
});

// generates random data
function getData() {
    function randomString() {
        var strings =  [ "foo", "bar", "baz", "qux", "cat", "dog", "egg", "rat" ];
        return strings[~~(Math.random() * strings.length)];
    }
    
    return [
        { text: randomString(), expanded: true, items: [
            { text: randomString() }
        ] },
        { text: randomString() }
    ];
}