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