Kendo - 2013.2.918

Kendo base

by Vojtech Mares

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
 <ul id="listView"></ul>

   <script type="text/x-kendo-template" id="template">
        <li >
            <h3>#:title#</h3>
            <p>#:rating#</p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </li>
    </script>

JavaScript

var movies = [
                        { "rank": 1,  "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption" },
                        { "rank": 2,  "rating": 9.2, "year": 1972, "title": "The Godfather" },
                        { "rank": 3,  "rating": 9,   "year": 1974, "title": "The Godfather: Part II" },
                        { "rank": 4,  "rating": 8.9, "year": 1966, "title": "Il buono, il brutto, il cattivo." },
                        { "rank": 5,  "rating": 8.9, "year": 1994, "title": "Pulp Fiction" },
                        { "rank": 6,  "rating": 8.9, "year": 1957, "title": "12 Angry Men" },
                        { "rank": 7,  "rating": 8.9, "year": 1993, "title": "Schindler's List" },
                        { "rank": 8,  "rating": 8.8, "year": 1975, "title": "One Flew Over the Cuckoo's Nest" },
                        { "rank": 9,  "rating": 8.8, "year": 2010, "title": "Inception" },
                        { "rank": 10, "rating": 8.8, "year": 2008, "title": "The Dark Knight" }
                    ];

                    var dataSource = new kendo.data.DataSource({
                        data: movies
                    });


 $("#listView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#template").html()),
               
                dataBound: function() {}
                   
                           
            });
 
          var bar =  $("#listView").kendoPanelBar({
                                   expandMode: "single" 
               
                                 }).data("kendoPanelBar");;
bar.expand("> li:first");