$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($data)->pageSize(16)->schema($schema);
$grid = new \Kendo\UI\Grid('grid');
$productName = new \Kendo\UI\GridColumn();
$productName->field('ProductName')->title('Product Name');
$unitPrice = new \Kendo\UI\GridColumn();
$unitPrice->field('UnitPrice')->width('130px')->format('{0:c}')->title('Unit Price');
$unitsInStock = new \Kendo\UI\GridColumn();
$unitsInStock->field('UnitsInStock')->width('130px')->title('Units In Stock');
$discontinued = new \Kendo\UI\GridColumn();
$discontinued->field('Discontinued')->width('130px');
$grid->addColumn($productName)->addColumn($unitPrice)->addColumn($unitsInStock)->addColumn($discontinued)->scrollable(false)->dataSource($dataSource);
echo $grid->render();
$sortable = new \Kendo\UI\Sortable('#grid table');
// select the container for the Sortable
$sortable->hint(new \Kendo\JavaScriptFunction('hint'))->placeholder(new \Kendo\JavaScriptFunction('placeholder'))->filter('>tbody >tr')->cursor('move')->container('#grid tbody')->change('onChange');
echo $sortable->render();
?>
<script>
var hint = $.noop;
function placeholder(element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
}
function onChange(e) {
var grid = $("#grid").data("kendoGrid"),
skip = grid.dataSource.skip(),
oldIndex = e.oldIndex + skip,
newIndex = e.newIndex + skip,
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$sortable = new \Kendo\UI\Sortable('#sortable-basic');
// select the container for the Sortable
$cursorOffset = new \Kendo\UI\SortableCursorOffset();
$cursorOffset->left(-230)->top(-10);
$sortable->hint(new \Kendo\JavaScriptFunction('hint'))->placeholder(new \Kendo\JavaScriptFunction('placeholder'))->cursor('url(\'../content/web/sortable/grabbing.cur\'), default')->cursorOffset($cursorOffset);
echo $sortable->render();
?>
<div id="playlist">
<div id="playlist-title"><span>My Playlist</span></div>
<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>
<li class="sortable">Points of Authority <span>3:20</span></li>
<li class="sortable">Crawling <span>3:29</span></li>
<li class="sortable">Runaway <span>3:03</span></li>
<li class="sortable">By Myself <span>3:09</span></li>
<li class="sortable">In the End <span>3:36</span></li>
<li class="sortable">A Place for My Head <span>3:04</span></li>
<li class="sortable">Forgotten <span>3:14</span></li>
<li class="sortable">Cure for the Itch <span>2:37</span></li>
<li class="sortable">Pushing Me Away <span>3:11</span></li>
</ul>
</div>
<script>
