$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(); $dataSource->data(array($documents)); $treeview->dataSource($dataSource); echo $treeview->render(); ?> <script> // Delete button behavior $(document).on("click", ".delete-link", function(e) { e.preventDefault(); var treeview = $("#treeview").data("kendoTreeView"); treeview.remove($(this).closest(".k-item")); }); </script> <style scoped>
<?php require_once 'lib/Kendo/Autoload.php'; include 'header.php'; // ---- Kendo UI DataSource Transport ---- $read = new Kendo\Data\DataSourceTransportRead(); $read->url('/api/employees.php')->contentType('application/json'); $transport = new Kendo\Data\DataSourceTransport(); $transport->read($read); // ---- Kendo UI Hierarchical DataSource ---- $model = new \Kendo\Data\HierarchicalDataSourceSchemaModel(); $model->id("EmployeeID")->hasChildren("HasEmployees"); $schema = new \Kendo\Data\HierarchicalDataSourceSchema(); $schema->model($model); $dataSource = new \Kendo\Data\HierarchicalDataSource(); $dataSource->transport($transport)->schema($schema); // ---- Kendo UI TreeView ---- $treeview = new \Kendo\UI\TreeView('employee-list'); $treeview->dataSource($dataSource)->dataTextField("FullName"); ?> <h2>Employees</h2> <p> A Kendo UI TreeView control with a hierarchical data source, lazy-loading the employee hierarchy. </p> <?php echo $treeview->render(); ?> <?php
})); return g; } </script> <?php $read = new \Kendo\Data\DataSourceTransportRead(); $read->url('index.php')->contentType('application/json')->type('POST'); $transport = new \Kendo\Data\DataSourceTransport(); $transport->read($read); $model = new \Kendo\Data\HierarchicalDataSourceSchemaModel(); $model->children("items"); $schema = new \Kendo\Data\HierarchicalDataSourceSchema(); $schema->model($model); $dataSource = new \Kendo\Data\HierarchicalDataSource(); $dataSource->transport($transport)->schema($schema); $layout = new \Kendo\Dataviz\UI\DiagramLayout(); $layout->type('layered'); $shape_defaults = new \Kendo\Dataviz\UI\DiagramShapeDefaults(); $shape_defaults->visual(new \Kendo\JavaScriptFunction('visualTemplate'))->editable(false)->rotatable(false)->resizable(false); $stroke = new \Kendo\Dataviz\UI\DiagramConnectionDefaultsStroke(); $stroke->color('#979797')->width(2); $connection_defaults = new \Kendo\Dataviz\UI\DiagramConnectionDefaults(); $connection_defaults->stroke($stroke); $diagram = new \Kendo\Dataviz\UI\Diagram('diagram'); $diagram->dataSource($dataSource)->layout($layout)->shapeDefaults($shape_defaults)->connectionDefaults($connection_defaults); echo $diagram->render(); ?> <?php
require_once '../include/header.php'; $transport = new \Kendo\Data\DataSourceTransport(); $read = new \Kendo\Data\DataSourceTransportRead(); // Connecting to live service on demos.telerik.com/kendo-ui // $read->url('http://demos.telerik.com/kendo-ui/service/Employees') // ->dataType('jsonp'); // Bind to self $read->url('remote-data-binding.php')->contentType('application/json')->type('POST'); $transport->read($read)->parameterMap('function(data) { return kendo.stringify(data); }'); $model = new \Kendo\Data\HierarchicalDataSourceSchemaModel(); $model->id("EmployeeID")->hasChildren("HasEmployees"); $schema = new \Kendo\Data\HierarchicalDataSourceSchema(); $schema->model($model); $dataSource = new \Kendo\Data\HierarchicalDataSource(); $dataSource->transport($transport)->schema($schema); $treeview = new \Kendo\UI\TreeView('treeview'); $treeview->attr('class', 'demo-section'); $treeview->dataSource($dataSource); $treeview->dataTextField("FullName"); echo $treeview->render(); ?> <style scoped> #example { text-align: center; } .demo-section { display: inline-block;
<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) { return function (e) { if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) { callback(e); } };
$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; width: 220px; overflow: visible; } .demo-section {
$inlineDefault = new \Kendo\Data\HierarchicalDataSource(); $inlineDefault->data(array(array('text' => 'Furniture', 'items' => array(array('text' => 'Tables & Chairs'), array('text' => 'Sofas'), array('text' => 'Occasional Furniture'))), array('text' => 'Decor', 'items' => array(array('text' => 'Bed Linen'), array('text' => 'Curtains & Blinds'), array('text' => 'Carpets'))))); $treeviewLeft = new \Kendo\UI\TreeView('treeview-left'); $treeviewLeft->dataSource($inlineDefault); echo $treeviewLeft->render(); ?> </div> <div class="demo-section"> <strong>Inline data</strong> <?php $model = new \Kendo\Data\HierarchicalDataSourceSchemaModel(); $model->children("subCategories"); $schema = new \Kendo\Data\HierarchicalDataSourceSchema(); $schema->model($model); $inline = new \Kendo\Data\HierarchicalDataSource(); $inline->schema($schema)->data(array(array('categoryName' => 'Storage', 'subCategories' => array(array('subCategoryName' => 'Wall Shelving'), array('subCategoryName' => 'Floor Shelving'), array('subCategoryName' => 'Kids Storage'))), array('categoryName' => 'Lights', 'subCategories' => array(array('subCategoryName' => 'Ceiling'), array('subCategoryName' => 'Table'), array('subCategoryName' => 'Floor'))))); $treeviewRight = new \Kendo\UI\TreeView('treeview-right'); $treeviewRight->dataSource($inline)->dataTextField(array('categoryName', 'subCategoryName')); echo $treeviewRight->render(); ?> </div> <style scoped> #example { text-align: center; } .demo-section { display: inline-block;
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) { kendoConsole.log("Selection changed"); }