Drag Grid Column Header ?

6 posts, 1 answers
  1. Rob
    Rob avatar
    59 posts
    Member since:
    Jan 2012

    Posted 05 May 2015 Link to this post

    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

  2. Rob
    Rob avatar
    59 posts
    Member since:
    Jan 2012

    Posted 05 May 2015 in reply to Rob Link to this post

    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!

  3. Kendo UI is VS 2017 Ready
  4. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 07 May 2015 Link to this post

    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!
     
  5. Rob
    Rob avatar
    59 posts
    Member since:
    Jan 2012

    Posted 11 May 2015 in reply to Plamen Lazarov Link to this post

    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

     

  6. Answer
    Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 12 May 2015 Link to this post

    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!
     
  7. Rob
    Rob avatar
    59 posts
    Member since:
    Jan 2012

    Posted 12 May 2015 in reply to Plamen Lazarov Link to this post

    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

     

     

Back to Top
Kendo UI is VS 2017 Ready