Sortable PHP Class Overview
The Kendo UI Sortable for PHP is a server-side wrapper for the Kendo UI Sortable widget.
Getting Started
Unlike most of the server-side wrappers, the Kendo UI Sortable one does not render HTML markup. Therefore, the Sortable should be initialized for a DOM element that already exists.
Configuration
Below are listed the steps for you to follow when configuring the Kendo UI Sortable 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 Create a Sortable, set its container, and customize the hint and placeholder of the widget.
<?php
$sortable = new \Kendo\UI\Sortable('#sortable-basic'); // select the container for the Sortable
$sortable->hint(new \Kendo\JavaScriptFunction('hint'))
->placeholder(new \Kendo\JavaScriptFunction('placeholder'));
?>
Step 3 Output the Sortable by echoing the result of the render method.
<?php
echo $sortable->render();
?>
Step 4 Define the HTML markup and the hint/placeholder JavaScript functions.
<ul id="sortable-basic">
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
<li class="sortable">With You <span>3:23</span></li>
</ul>
<script>
function hint(element) {
return element.clone().addClass("hint");
}
function placeholder(element) {
return element.clone().addClass("placeholder").text("drop here");
}
</script>
Event Handling
You can subscribe to all Sortable events.
Specify Function Names
The example below demonstrates how to subscribe for events by specifying a JavaScript function name.
<?php
$sortable = new \Kendo\UI\Sortable('#sortable');
// The 'onChange' JavaScript function will handle the 'change' event of the sortable
$sortable->change('onChange');
echo $sortable->render();
?>
<script>
function onChange(e) {
// Handle the show event
}
</script>
Provide Inline Code
The example below demonstrates how to subscribe to events by providing inline JavaScript code.
<?php
$sortable = new \Kendo\UI\Sortable('#sortable');
// Provide inline JavaScript code that will handle the 'change' event of the sortable
$sortable->change('function(e) { /* Handle the change event */ }');
echo $sortable->render();
?>
Disable Hints
The Sortable widget can operate without a hint. To disable the hint, set it to an empty function (jQuery.noop).
<?php
$sortable = new \Kendo\UI\Sortable('#sortable-basic'); // select the container for the Sortable
$sortable->hint(new \Kendo\JavaScriptFunction('noHint'));
?>
<script>
var noHint = $.noop;
</script>
Reference
Client-Side Instances
You are able to reference an existing Sortable instance via the jQuery.data(). Once a reference is established, use the Sortable API to control its behavior.
<?php
$sortable = new \Kendo\UI\Sortable('#sortable');
echo $sortable->render();
?>
<script>
$(function() {
// The constructor parameter is used as a selector for getting sortable's element
var sortable = $("#sortable").data("kendoSortable");
});
</script>