<ul class="options"> <li> <button class="k-button" id="sortDataSource">Sort</button> </li> <li> <input id="filterText" value="Item 1" class="k-textbox"/> <button class="k-button" id="filterDataSource">Filter by text</button> </li> </ul> </div> <div class="demo-section"> <?php $treeview = new \Kendo\UI\TreeView('treeview'); $item1 = new \Kendo\UI\TreeViewItem('Item 1'); $item1->expanded(true); $item1->addItem(new \Kendo\UI\TreeViewItem('Item 1.1'), new \Kendo\UI\TreeViewItem('Item 1.2'), new \Kendo\UI\TreeViewItem('Item 1.3')); $item2 = new \Kendo\UI\TreeViewItem('Item 2'); $item2->addItem(new \Kendo\UI\TreeViewItem('Item 2.1'), new \Kendo\UI\TreeViewItem('Item 2.2'), new \Kendo\UI\TreeViewItem('Item 2.3')); $item3 = new \Kendo\UI\TreeViewItem('Item 3'); $dataSource = new \Kendo\Data\HierarchicalDataSource(); $dataSource->data(array($item1, $item2, $item3)); $treeview->dataSource($dataSource)->loadOnDemand(false); echo $treeview->render(); ?> </div> <script> $(document).ready(function () { var treeview = $("#treeview").data("kendoTreeView"), handleTextBox = function (callback) {
<?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
$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')); $decor = new \Kendo\UI\TreeViewItem('Decor'); $decor->addItem(new \Kendo\UI\TreeViewItem('Bed Linen'), new \Kendo\UI\TreeViewItem('Curtains & Blinds'), new \Kendo\UI\TreeViewItem('Carpets')); $datasource = new \Kendo\Data\HierarchicalDataSource(); $datasource->data(array($furniture, $decor)); $treeview->dataSource($datasource); echo $treeview->render(); ?> <?php $treeview = new \Kendo\UI\TreeView('treeview-right'); $treeview->dragAndDrop(true); $storage = new \Kendo\UI\TreeViewItem('Storage'); $storage->expanded(true); $storage->addItem(new \Kendo\UI\TreeViewItem('Wall Shelving'), new \Kendo\UI\TreeViewItem('Floor Shelving'), new \Kendo\UI\TreeViewItem('Kids Storage')); $lights = new \Kendo\UI\TreeViewItem('Lights'); $lights->addItem(new \Kendo\UI\TreeViewItem('Ceiling'), new \Kendo\UI\TreeViewItem('Table'), new \Kendo\UI\TreeViewItem('Floor')); $datasource = new \Kendo\Data\HierarchicalDataSource(); $datasource->data(array($storage, $lights)); $treeview->dataSource($datasource); echo $treeview->render(); ?> </div> <style scoped> #treeview-left, #treeview-right { float: left;
<?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) {