fullpagemock

by siliconsoul

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>
                <table data-bind="visible: hasSubItems">
                    <thead>
                        <tr>
                            <th>Secondary Data Table Header Here</th>
                        </tr>
                    </thead>
                    <tbody data-template="attached-template" data-bind="source: getAttachedData"></tbody>
                </table>
            </div>
            ---------------
        </li>
    </script>                
  
    <script id="attached-template" type="text/x-kendo-template">
        <tr>
            <td data-bind="text:Title"/>
        </tr>
    </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":...