<?php require_once '../include/header.php'; require_once '../lib/Kendo/Autoload.php'; ?> <?php $treeview = new \Kendo\UI\TreeView('treeview'); $treeview->attr('class', 'demo-section'); $treeview->template('#: item.text #' . '# if (!item.items) { #' . '<a class="delete-link" href="\\#"></a>' . '# } #'); // helper function that creates TreeViewItem with id and spriteCssClass function TreeViewItem($id, $text, $spriteCssClass) { $item = new \Kendo\UI\TreeViewItem($text); $item->spriteCssClass($spriteCssClass); $item->id = $id; return $item; } $documents = TreeViewItem(1, 'My Documents', 'rootfolder'); $documents->expanded(true); $kendoproject = TreeViewItem(2, 'Kendo UI Project', 'folder'); $kendoproject->expanded(true); $kendoproject->addItem(TreeViewItem(3, 'about.html', 'html'))->addItem(TreeViewItem(4, 'index.html', 'html'))->addItem(TreeViewItem(5, 'logo.png', 'image')); $newsite = TreeViewItem(6, 'New Web Site', 'folder'); $newsite->expanded(true); $newsite->addItem(TreeViewItem(7, 'mockup.jpg', 'image'))->addItem(TreeViewItem(8, 'Research.pdf', 'pdf')); $reports = TreeViewItem(9, 'Reports', 'folder'); $reports->expanded(true); $reports->addItem(TreeViewItem(10, 'February.pdf', 'pdf'))->addItem(TreeViewItem(11, 'March.pdf', 'pdf'))->addItem(TreeViewItem(12, 'April.pdf', 'pdf')); $documents->addItem($kendoproject, $newsite, $reports); $dataSource = new \Kendo\Data\HierarchicalDataSource();
<?php require_once '../include/header.php'; require_once '../lib/Kendo/Autoload.php'; ?> <?php $treeview = new \Kendo\UI\TreeView('treeview'); $treeview->attr('class', 'demo-section')->attr('style', 'width: 200px'); $treeview->dragAndDrop(true); // build DataSource $furniture = new \Kendo\UI\TreeViewItem('Furniture'); $furniture->expanded(true); $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->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'); $dataSource = new \Kendo\Data\HierarchicalDataSource(); $dataSource->data(array($furniture, $decor, $storage)); $treeview->dataSource($dataSource); // attach client-side events $treeview->select("onSelect")->change("onChange")->collapse("onCollapse")->expand("onExpand")->dragStart("onDragStart")->drag("onDrag")->drop("onDrop")->dragEnd("onDragEnd")->navigate("onNavigate"); echo $treeview->render(); ?> <script> function onSelect(e) { kendoConsole.log("Selecting: " + this.text(e.node)); } function onChange(e) {
<?php 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
</li> <li> <input id="expand" name="animation" type="radio" checked="checked" /> <label for="expand">expand animation</label> </li> <li> <input id="opacity" type="checkbox" checked="checked" /> <label for="opacity">animate opacity</label> </li> </ul> </div> <div class="demo-section"> <?php $treeview = new \Kendo\UI\TreeView('treeview'); $treeview->attr('style', 'width: 200px;'); $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> <script> $(document).ready(function() { var original = $("#treeview").clone(true);