$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");
}
