fullpagemock

by Chris O'Brien

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
    <div id="treelist-container">
        <span data-bind="text:drivingTitle"></span>
       
        <div id="tree-section"
             data-role="treeview"
             data-drag-and-drop="false"
             data-value-field="NodeId" 
             data-text-field="Title"
             data-bind="source: objsDataSource, events: { select: onSelect }"></div>
                           
        <div id="lv-section" data-bind="visible: showForm">
            <ul data-bind="source: listDataSource" data-role="listview" data-template="tmplistitem"></ul>
        </div>
    </div>

    <div id="grid"></div>
    
    <script id="tmplistitem" type="text/x-kendo-template">
        <li>
            Main data <label data-bind="text:Title"></label>
            Secondary data
            <div data-bind="source: getAttachedData" data-template="attached-template"/>
        </li>
    </script>                
  
    <script id="attached-template" type="text/x-kendo-template">
        ;
    </script>

CSS

#treelist-container{ width: 900px;overflow: auto;}
        #tree-section{ float: left;width: 280px;}
        #lv-section{ float: left;width: 600px;}
        
        #lv-section li
        {
            border: solid #e9e9e9;
            border-width: 1px 1px 1px 0;
        }
        
        #lv-section li:nth-child(odd) {
            background-color: #FFFFFF;
        }
        #lv-section li:nth-child(even) {
            background-color:  #FAFAFA;
        }

JavaScript

<!-- 3 data sets..  1) tree data  which on select shows list of 2) 'main data' attached to tree which then shows 3) data attached to main data -->

var treeData = [
                        { Title: "Furniture", NodeId: "FUR", HasChildren: true, Children: [
                            { Title: "Tables & Chairs", NodeId: "TAB", ParentId: "FUR", HasChildren: false },
                            { Title: "Sofas", NodeId: "SOF", ParentId: "FUR", HasChildren: false },
                            { Title: "Occasional Furniture", NodeId: "OCC", ParentId: "FUR", HasChildren: false }
                        ] },
                        { Title: "Decor", NodeId: "DEC", HasChildren: true, Children: [
                            { Title: "Bed Linen", NodeId: "BED", ParentId: "DEC", HasChildren: false },
                            { Title: "Curtains & Blinds", NodeId: "CUR", ParentId: "DEC", HasChildren: false },
                            { Title: "Carpets", NodeId: "CAR", ParentId: "DEC", HasChildren: false }
                        ] }
                    ];

var mainData = [
    {"Id": "XXX","Title": "xxx","ParentId": "FUR"},
    {"Id": "CUT","Title": "cutlery","ParentId": "TAB"},
    {"Id": "PLA","Title": "plates","ParentId": "TAB"},
    {"Id": "CUS","Title": "cushions","ParentId": "SOF"},
    {"Id": "COV","Title": "cover","ParentId": "OCC"},
    
    {"Id": "ZZZ","Title": "zzz","ParentId": "DEC"},
    {"Id": "PIL","Title": "pillow","ParentId": "BED"},
    {"Id": "QUI","Title": "quilt","ParentId": "BED"},
    {"Id": "TIE","Title": "curtain ties","ParentId": "CUR"},
    {"Id": "CLE","Title": "carpet cleaner","ParentId": "CAR"},
];

<!-- only have attached data for parent of cutley, plates, cushions and carpets ->
var attachedData= [
    {"Id": "SIL","Title": "silver","ParentId": "CUT"},
    {"Id": "CHI","Title": "china","ParentId": "PLA"},
    {"Id": "PLA","Title": "plastic","ParentId": "PLA"},
    {"Id": "TAS","Title": "tassles","ParentId": "CUS"},    
    {"Id":...