This is a migrated thread and some comments may be shown as answers.

Drag Grid Column Header ?

5 Answers 139 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Veteran
Rob asked on 06 May 2015, 01:28 AM

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

5 Answers, 1 is accepted

Sort by
0
Rob
Top achievements
Rank 1
Veteran
answered on 06 May 2015, 04:50 AM

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!

0
Plamen Lazarov
Telerik team
answered on 07 May 2015, 09:16 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rob
Top achievements
Rank 1
Veteran
answered on 11 May 2015, 08:55 AM

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

 

0
Accepted
Plamen Lazarov
Telerik team
answered on 12 May 2015, 01:31 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rob
Top achievements
Rank 1
Veteran
answered on 12 May 2015, 11:08 PM

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

 

 

Tags
Drag and Drop
Asked by
Rob
Top achievements
Rank 1
Veteran
Answers by
Rob
Top achievements
Rank 1
Veteran
Plamen Lazarov
Telerik team
Share this question
or