kendoui dima

by dude_jsfiddle

HTML

<link rel="stylesheet" href=" http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href=" http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<div id="example">
    <div class="demo-section k-header">
        <div class="box-col">
            <h4>Select an item</h4>
            <ul data-role="panelbar"
                data-bind="events: { select: onSelect },
                           visible: isVisible"
                style="width: 300px">
                <li class="k-state-active">
                    Metallica - Master of Puppets 1986
                    <ul>
                        <li>Battery</li>
                        <li>Master of Puppets</li>
                        <li>The Thing That Should Not Be</li>
                        <li>Welcome Home (Sanitarium)</li>
                        <li>Disposable Heroes</li>
                        <li>Leper Messiah</li>
                        <li>Orion (Instrumental)</li>
                        <li>Damage, Inc.</li>
                    </ul>
                </li>
                <li>
                    Iron Maiden - Brave New World 2000
                    <ul>
                        <li>The Wicker Man</li>
                        <li>Ghost Of The Navigator</li>
                        <li>Brave New World</li>
                        <li>Blood Brothers</li>
                        <li>The Mercenary</li>
                        <li>Dream Of Mirrors</li>
                        <li>The Fallen Angel</li>
                        <li>The Nomad</li>
                        <li>Out Of The Silent Planet</li>
                        <li>The Thin Line Between Love And Hate</li>
                    </ul>
 ...

JavaScript

var viewModel = kendo.observable({
        isVisible: true,
        onSelect: function(e) {
            var text = $(e.item).children(".k-link").text();
         //   kendoConsole.log("event :: select(" + text + ")");
        }
    });

$(document).ready(function(){


   
    kendo.bind($("#example"), viewModel);
    });