Splitter PHP Class Overview

The Kendo UI Splitter for PHP is a server-side wrapper for the Kendo UI Splitter widget.

Getting Started

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI Splitter for PHP.

Step 1 Make sure you followed all the steps from the introductory article on Telerik UI for PHP—include the autoloader, JavaScript, and CSS files.

Step 2 Add a Splitter.

        <?php
        // create inner splitter
        $inner = new \Kendo\UI\Splitter('horizontal');
        $inner->attr("style", "height: 100%; width: 100%;");

        $leftPane = new \Kendo\UI\SplitterPane();
        $leftPane->attr("id", "left-pane")
             ->collapsible(true)
             ->size(220)
             ->startContent();
        ?>

        <div class="pane-content">
            <h3>Inner splitter / left pane</h3>
            <p>Resizable and collapsible.</p>
        </div>

        <?php
        $leftPane->endContent();
        $inner->addPane($leftPane);

        $centerPane = new \Kendo\UI\SplitterPane();
        $centerPane->attr("id", "center-pane")
             ->collapsible(false)
             ->startContent();
        ?>

        <div class="pane-content">
            <h3>Inner splitter / center pane</h3>
            <p>Resizable only.</p>
        </div>

        <?php
        $centerPane->endContent();
        $inner->addPane($centerPane);

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

        $topPane = new \Kendo\UI\SplitterPane();
        $topPane->attr("id", "top-pane")
            ->collapsible(false)
            ->content($inner->render());

        $middlePane = new \Kendo\UI\SplitterPane();
        $middlePane->attr("id", "middle-pane")
               ->collapsible(false)
               ->size(100)
               ->startContent();
        ?>

        <div class="pane-content">
            <h3>Outer splitter / middle pane</h3>
            <p>Resizable only.</p>
        </div>

        <?php
        $middlePane->endContent();

        $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();

        // create outer splitter
        $splitter = new \Kendo\UI\Splitter('splitter');
        $splitter->orientation("vertical");
        $splitter->addPane($topPane, $middlePane, $bottomPane);
        ?>

Step 3 Output the Splitter by echoing the result of the render method.

    <?php
    echo $splitter->render();
    ?>

Event Handling

You can subscribe to all Splitter events.

Specify Function Names

The example below demonstrates how to subscribe for events by specifying a JavaScript function name.

    <?php
    $splitter = new \Kendo\UI\Splitter('splitter');

    // The 'resize_dataBound' JavaScript function will handle the 'dataBound' event of the splitter
    $splitter->resize('splitter_resize');

    echo $splitter->render();
    ?>
    <script>
    function splitter_resize() {
        // Handle the resize event
    }
    </script>

Provide Inline Code

The example below demonstrates how to subscribe to events by providing inline JavaScript code.

    <?php
    $splitter = new \Kendo\UI\Splitter('splitter');

    // Provide inline JavaScript code that will handle the 'dataBound' event of the splitter
    $splitter->resize('function() { /* Handle the resize event */ }');

    echo $splitter->render();
    ?>

Reference

Client-Side Instances

You are able to reference an existing Splitter instance via the jQuery.data(). Once a reference is established, use the Splitter API to control its behavior.

    //Put this after your Kendo UI Splitter for PHP declaration
    <script>
    $(function() {
        // Notice that the Name() of the splitter is used to get its client-side instance
        var splitter = $("#splitter").data("kendoSplitter");
    });
    </script>

See Also

In this article