overview.md

title	page_title	description	slug	position
Overview	Overview | Splitter PHP Class	Get started with the Splitter PHP class in Kendo UI.	overview_splitter_uiforphp	1

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]({% slug overview_uiforphp %})—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

• [Overview of the Kendo UI Splitter Widget]({% slug overview_kendoui_splitter_widget %})
• Telerik UI for PHP API Reference Folder
• [Telerik UI for PHP Classes Folder]({% slug overview_autocomplete_uiforphp %})