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;
}
});
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;
}
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
5 Answers, 1 is accepted

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

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

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