Mithrilhall Mithrilhall - 26 days ago 10
jQuery Question

Adding draggable to table rows (with Kendo Grid)

I'm trying to add a draggable event on the rows from a table and I'm not getting what I should. It's a Kendo Grid that's creating the table structure. Eventually, I would like to drop the row on something that is not Kendo if possible.


<div id="Assets" style="width: 200px; float: left;" data-role="grid" class="k-grid k-widget" tabindex="0">
<div class="k-widget k-grid" id="Assets">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table cellspacing="0">
<col style="width: 240px">
<div class="k-grid-content" style="height: 200px">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap">
<table cellspacing="0">
<colgroup><col style="width: 240px"></colgroup>
<tr data-role="draggable">
<th class="k-header" data-field="Id" data-title="Id" scope="col" style="display: none"><span class="k-link">Id</span></th>
<th class="k-header" data-field="Name" data-title="Name" scope="col"><span class="k-link">Name</span></th>
<table cellspacing="0" class="k-focusable">
<colgroup><col style="width: 240px"/></colgroup>
<tr data-uid="cc7fc98a-dc66-4a46-8d3a-b73d608cf32b">
<td style="display: none">1</td>
<td>A Commons</td>
<tr class="k-alt" data-uid="daf17bf4-52d3-43a4-acc0-034c7c53e5af">
<td style="display: none">2</td>
<td>A Chase</td>
<tr data-uid="6dbe2dec-e9ce-4640-8f61-f1ee4469a581">
<td style="display: none">4</td>
<tr class="k-alt" data-uid="569798d6-433c-4dea-b56b-5833bab22058">
<td style="display: none">5</td>
<tr data-uid="4639277c-97eb-43d0-9aa1-6402671474b5">
<td style="display: none">6</td>
<tr class="k-alt" data-uid="9ad1bf14-91bf-474f-9115-246c55c38eab">
<td style="display: none">3</td>


Here is my code trying to select the tr's I need:

$(".k-focusable > tbody > tr").kendoDraggable({
hint: function(e) {
item = $('<div class="k-grid k-widget" style="background-color: lightblue; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
return item;

I would prefer to do it a purely

cursor: 'move',
distance: 40,
helper: 'clone',
opacity: 0.8,
revert: 'invalid',
revertDuration: 100,
snap: 'div.node.expanded',
snapMode: 'inner',
stack: 'div.node',


Not sure what you want to do when dropped but this should do the trick of moving a row from Kendo Grid to a droppable area BUT it does not actually remove the element from the grid so you should (or not?).

What I do when dropped is clone the element being moved and insert this clone in the target area.

HTML code:

<div id="grid"></div>
<table id="target" class="k-widget k-grid">
            <th class="k-header" colspan="2">Drop inside red area</th>

JavaScript Grid initialization:

var dataSource = new{
    data    : [
        {"ID": 1, "Nom": "John"},
        {"ID": 2, "Nom": "Jane"},
        {"ID": 3, "Nom": "Sam"},
        {"ID": 4, "Nom": "Charles"},
        {"ID": 5, "Nom": "Paul"},
        {"ID": 6, "Nom": "Josh"},
        {"ID": 7, "Nom": "Daniel"}
    pageSize: 8

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    columns   : [
        {field: "ID" },
        {field: "Nom"}

And finally the drag and drop:

$("tr", grid.tbody).kendoDraggable({
    hint: function (e) {
        item = $('<div class="k-grid k-widget" style="background-color: lightblue; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
        return item;

    drop: function (e) {

See it running here