Custom drag and drop half working, lost event binding on pagination, please help.

[JB]

Hi All,

I have a product listing grid and I need to be able to drag each product onto another panel on the same page.

One of the posts suggested that the Grid has no built-in drag and drop support yet.  So I attempted to use the non-visual Drag and Drop component, as follow:

1. Using Table method with each TD:
<td><div class="pc-draggable" style="display: inline-block; width:100%; cursor:pointer">Each product name goes here</div></td>

2. Using jQuery.each to convert each of the div within each td into draggable.
$(".pc-draggable").each(function () {
          {
                  var dragHint = $(this).clone();
                  $(this).kendoDraggable({ hint: function () { return dragHint; } });
         }
}

This seems to allow dragging UNTIL the user change the listing via pagination.  It seems pagination "ditches" my custom drag bindings in step 2.

Is there any way I can work arround this issue of losing the custom draggable binding?   One way I could think of is to catch the "pagination change event", but I don't know (if it is possible) how to hookup/bind such an event, so that I could re-execute the code in step 2 above.   The only way I could catch the pagination click was using the following code:

 $(".k-link").click(function () { setTimeout("prepareDraggable()", "300");});  
// Where prepareDraggable() is actually step 2 above.

Or, if any one can suggest a better or proper way to implement per-grid row drag and drop?

Thanks!

JB

[Rosen]

Hello Jb,

You may try using grid's dataBound event. It is raised after grid is bound and rendered. 

$("#grid").kendoGrid({

//...

     dataBound: function() {         

           prepareDraggable();

     }

});

All the best,
Rosen
the Telerik team

[JB]

Thanks Rosen.   The DataBound trick works great!

JB 

[Loganathan]

hi please share demo link.