PHP Kendo\UI\SplitterPane Examples

Example #1

File: events.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<?php 
$splitter = new \Kendo\UI\Splitter('splitter');
$splitter->attr('style', 'height: 400px;')->orientation('vertical')->resize('onResize')->expand('onExpand')->collapse('onCollapse')->contentLoad('onContentLoad');
$topPane = new \Kendo\UI\SplitterPane();
$topPane->attr('id', 'top_pane')->content('<p>Top pane</p>')->collapsible(true)->size(100);
$splitter->addPane($topPane);
$ajaxPane = new \Kendo\UI\SplitterPane();
$ajaxPane->attr('id', 'ajax_pane')->contentUrl('../content/web/splitter/ajax/ajaxContent1.html')->collapsible(false);
$splitter->addPane($ajaxPane);
$bottomPane = new \Kendo\UI\SplitterPane();
$bottomPane->attr('id', 'bottom_pane')->content('<p>Bottom pane</p>')->collapsible(true)->size('20%');
$splitter->addPane($bottomPane);
echo $splitter->render();
?>

<script>
    function onResize(e) {
        kendoConsole.log("Resized :: Splitter <b>#" + this.element[0].id + "</b>");
    }

    function onExpand(e) {
        kendoConsole.log("Expanded :: Pane <b>#" + e.pane.id + "</b> from splitter <b>#" + this.element[0].id + "</b> expanded");
    }

    function onCollapse(e) {

Example #2

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

$rightPane = new \Kendo\UI\SplitterPane();
$rightPane->attr("id", "center-pane")->collapsible(true)->size(220)->startContent();
?>
    <div class="pane-content">
        <h3>Inner splitter / right pane</h3>
        <p>Resizable and collapsible.</p>
    </div>
<?php 
$rightPane->endContent();
$inner->addPane($rightPane);
// create outer splitter
$outer = new \Kendo\UI\Splitter('vertical');
$outer->orientation("vertical");
$topPane = new \Kendo\UI\SplitterPane();
$topPane->attr("id", "top-pane")->collapsible(false)->content($inner->render());
$bottomPane = new \Kendo\UI\SplitterPane();
$bottomPane->attr("id", "bottom-pane")->collapsible(false)->resizable(false)->size(100)->startContent();
?>
    <div class="pane-content">
        <h3>Outer splitter / bottom pane</h3>
        <p>Non-resizable and non-collapsible.</p>
    </div>
<?php 
$bottomPane->endContent();
$outer->addPane($topPane, $bottomPane);
echo $outer->render();
?>

<ul id="keyboard-nav" class="keyboard-legend">
    <li>
        <span class="button-preview">

Example #3

File: ajax.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<?php 
$splitter = new \Kendo\UI\Splitter('splitter');
$leftPane = new \Kendo\UI\SplitterPane();
$leftPane->contentUrl('../content/web/splitter/ajax/ajaxContent1.html');
$splitter->addPane($leftPane);
$rightPane = new \Kendo\UI\SplitterPane();
$rightPane->contentUrl('../content/web/splitter/ajax/ajaxContent2.html');
$splitter->addPane($rightPane);
echo $splitter->render();
?>

<?php 
require_once '../include/footer.php';