Drag Grid Column Header ?

[Rob]

Hi Guys

Sorry , new to this drag and drop stuff!

 

How do I get KendoDraggable for dragging just the column Header in a Grid?

 I found a fiddle  Original Fiddlefor dragging the table rows to a target.. the kendoDraggable is like this.

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

 

 Original Fiddle

 So I tried changing this to 

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

 

My Attempt Fiddle

But this drags all the text from all the Column headers.  I just want to know the column that they dragged to the target.

I'm not sure what data I can get on the drop.. text and maybe the column index or something?

 

Many thanks

 

Rob

[Rob]

Almost got it :)

Changed to 

$("th", grid.thead).kendoDraggable({
  hint: function (e) {
      console.log(e);
    var item = $('<div class="k-header" style="background-color: lightblue; color: black;"><table><thead><tr>' + e.html() + '</tr></thead></table></div>');
    return item;
  }
});

 

 

I just need to sort out all the 'item = ' stuff to try and get the data on the drop!

[Plamen Lazarov]

Hello Rob,

It is not clear what exactly should be accomplished in the current case. If the main goal is sorting the "<th>" elements in the drop area then a custom sorting algorithm in "drop" method will be required since the drop area is a simple table. 

Regards,
Plamen Lazarov
Telerik

 

 

[Rob]

Thank you.

I got it all working well, apart from the position of the draggable object.

 If a column is quite wide and the user clicks off the text in the header, I get the draggable item displayed along way from the cursor which is really ugly and confuses things when dropping into a small text box.  

How can I make sure the dragged text is on the cursor? 

Many thanks

 

[Plamen Lazarov]

Hello Rob,

My suggestion in this case would be to use the cursorOffset. It specifies the offset of the hint relative to the mouse cursor/finger. The option accepts an object with two keys: top and left. Please check this demo. 

Regards,
Plamen Lazarov
Telerik

 

 

[Rob]

Yep, that's perfect!

This little issue was on the back burner while I am working to finish the project. 

I would have never found this elegant solution.

Thank you so much. :)

 Rob