Example #1
0
    $item->spriteCssClass($spriteCssClass);
    return $item;
}
$site = TreeViewItem('My Web Site', 'folder');
$images = TreeViewItem('images', 'folder');
$images->expanded(true);
$images->addItem(TreeViewItem('logo.png', 'image'))->addItem(TreeViewItem('body-back.png', 'image'))->addItem(TreeViewItem('my-photo.jpg', 'image'));
$pdfs = TreeViewItem('pdf', 'folder');
$pdfs->expanded(true);
$pdfs->addItem(TreeViewItem('brochure.pdf', 'pdf'))->addItem(TreeViewItem('prices.pdf', 'pdf'));
$resources = TreeViewItem('resources', 'folder');
$resources->expanded(true);
$resources->addItem($pdfs)->addItem(TreeViewItem('zip', 'folder'));
$site->expanded(true);
$site->addItem($images)->addItem($resources)->addItem(TreeViewItem('about.html', 'html'))->addItem(TreeViewItem('contacts.html', 'html'))->addItem(TreeViewItem('index.html', 'html'))->addItem(TreeViewItem('portfolio.html', 'html'));
$treeview->addItem($site);
echo $treeview->render();
?>
</div>

<style scoped>
    .demo-section {
        width: 200px;
    }

    #treeview .k-sprite {
        background-image: url("../content/web/treeview/coloricons-sprite.png");
    }

    .rootfolder { background-position: 0 0; }
    .folder { background-position: 0 -16px; }
Example #2
0
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<div class="demo-section">
<?php 
$treeview = new \Kendo\UI\TreeView('treeview');
$treeview->attr('tabindex', '1')->attr('accesskey', 'w');
$furniture = new \Kendo\UI\TreeViewItem('Furniture');
$furniture->addItem(new \Kendo\UI\TreeViewItem('Tables & Chairs'), new \Kendo\UI\TreeViewItem('Sofas'), new \Kendo\UI\TreeViewItem('Occasional Furniture'), new \Kendo\UI\TreeViewItem('Childerns Furniture'), new \Kendo\UI\TreeViewItem('Beds'));
$decor = new \Kendo\UI\TreeViewItem('Decor');
$decor->expanded(true);
$decor->addItem(new \Kendo\UI\TreeViewItem('Bed Linen'), new \Kendo\UI\TreeViewItem('Throws'), new \Kendo\UI\TreeViewItem('Curtains & Blinds'), new \Kendo\UI\TreeViewItem('Rugs'), new \Kendo\UI\TreeViewItem('Carpets'));
$storage = new \Kendo\UI\TreeViewItem('Storage');
$storage->addItem(new \Kendo\UI\TreeViewItem('Wall Shelving'), new \Kendo\UI\TreeViewItem('Kids Storage'), new \Kendo\UI\TreeViewItem('Baskets'), new \Kendo\UI\TreeViewItem('Multimedia Storage'), new \Kendo\UI\TreeViewItem('Floor Shelving'), new \Kendo\UI\TreeViewItem('Toilet Roll Holders'), new \Kendo\UI\TreeViewItem('Storage Jars'), new \Kendo\UI\TreeViewItem('Drawers'), new \Kendo\UI\TreeViewItem('Boxes'));
$treeview->addItem($furniture, $decor, $storage);
echo $treeview->render();
?>
</div>

<ul class="keyboard-legend">
    <li>
        <span class="button-preview">
            <span class="key-button leftAlign wider">Alt</span>
            +
            <span class="key-button">w</span>
        </span>
        <span class="button-descr">
            focuses the widget
        </span>
    </li>