fullpagemock

by Chris O'Brien

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
    <div id="treelist-container">
        Main Data for tree selection of <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="main-section" data-bind="visible: showForm">
            <ul data-bind="source: listDataSource" data-role="listview" data-template="tmplistitem"/>
        </div>
    </div>
    
    <script id="tmplistitem" type="text/x-kendo-template">
        <li>
            Main data : <label data-bind="text:Title"/>
            <div>Secondary data :
                <div data-bind="source: getAttachedData" data-template="attached-template"/>
            </div>
            ---------------
        </li>
    </script>                
  
    <script id="attached-template" type="text/x-kendo-template">
        <label data-bind="text:Title"/>;
    </script>

CSS

#treelist-container{ width: 900px;overflow: auto;}
        #tree-section{ float: left;width: 280px;}
        #main-section{ float: left;width: 600px;}

JavaScript

// *** 3 data sets..  1) tree data  which on select shows list of 2) 'main data' associated with tree node which then in tuen  shows 3) data attached to main data 

var treeData = [
    { Title: "Furniture", NodeId: "FUR", HasChildren: true, expanded: 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, expanded: 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": "CUT","Title": "cutlery","ParentId": "TAB"},
    {"Id": "PLA","Title": "plates","ParentId": "TAB"},
    {"Id": "CUS","Title": "cushions","ParentId": "SOF"},    
    {"Id": "COV","Title": "cover","ParentId": "OCC"},
    
    {"Id": "BOO","Title": "bookshelf","ParentId": "OCC"},
    {"Id": "PIL","Title": "pillow","ParentId": "BED"},
    {"Id": "QUI","Title": "quilt","ParentId": "BED"},
    {"Id": "TIE","Title": "curtain ties","ParentId": "CUR"},
    {"Id": "BLI","Title": "blind opener","ParentId": "CUR"},
    {"Id": "CLE","Title": "carpet cleaner","ParentId": "CAR"},
];

// *** only have attached data for certain items in top half of tree
var attachedData= [
    {"Id": "SIL","Title": "silver","ParentId": "CUT"},
    {"Id": "GOL","Title": "gold plated","ParentId": "CUT"},
    {"Id": "CHI","Title": "china","ParentId": "PLA"},
    {"Id": "PLA","Title":...