<?php

require_once '../lib/Kendo/Autoload.php';

?>
<div class="demo-section k-content">
<?php
    $treeview = new \Kendo\UI\TreeView('treeview');

    $treeview->dragAndDrop(true);

    $treeview->checkboxes(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")
             ->check("onCheck")
             ->change("onChange")
             ->collapse("onCollapse")
             ->expand("onExpand")
             ->dragStart("onDragStart")
             ->drag("onDrag")
             ->drop("onDrop")
             ->dragEnd("onDragEnd")
             ->navigate("onNavigate");

    echo $treeview->render();
?>
</div>
<script>
    function onSelect(e) {
        kendoConsole.log("Selecting: " + this.text(e.node));
    }

    function onCheck(e) {
        kendoConsole.log("Checkbox changed :: " + this.text(e.node));
    }

    function onChange(e) {
        kendoConsole.log("Selection changed");
    }

    function onCollapse(e) {
        kendoConsole.log("Collapsing " + this.text(e.node));
    }

    function onExpand(e) {
        kendoConsole.log("Expanding " + this.text(e.node));
    }

    function onDragStart(e) {
        kendoConsole.log("Started dragging " + this.text(e.sourceNode));
    }

    function onDrag(e) {
        kendoConsole.log("Dragging " + this.text(e.sourceNode));
    }

    function onDrop(e) {
        kendoConsole.log(
        "Dropped " + this.text(e.sourceNode) +
        " (" + (e.valid ? "valid" : "invalid") + ")"
        );
    }

    function onDragEnd(e) {
        kendoConsole.log("Finished dragging " + this.text(e.sourceNode));
    }

    function onNavigate(e) {
        if (e.node) {
            kendoConsole.log("Navigate " + this.text(e.node));
        }
    }
</script>

<div class="box">
    <h4>Console log</h4>
    <div class="console"></div>
</div>