PHP Kendo\UI\TreeViewItem Examples

Example #1

File: templates.php Project: neevan1e/Done

function TreeViewItem($id, $text, $spriteCssClass)
{
    $item = new \Kendo\UI\TreeViewItem($text);
    $item->spriteCssClass($spriteCssClass);
    $item->id = $id;
    return $item;
}

Example #2

File: api.php Project: neevan1e/Done

            <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) {
                return function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {

Example #3

File: keyboard-navigation.php Project: neevan1e/Done

<?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

Example #4

File: dragdrop.php Project: neevan1e/Done

$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;
        width: 220px;
        overflow: visible;

Example #5

File: events.php Project: neevan1e/Done

<?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) {