Drag & Drop of rows

Thread is closed for posting
13 posts, 0 answers
  1. DaveJ
    DaveJ avatar
    9 posts
    Member since:
    Nov 2014

    Posted 22 Dec 2014 Link to this post

    Hi,

    Is it possible to achieve drag & drop functionality of rows, similar to the TreeList in the ASP.NET AJAX control? If not, is there any way to move the order of the rows up or down (through API, etc)?

    Thanks!
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2510 posts

    Posted 24 Dec 2014 Link to this post

    Hello Yaron,

    I am afraid that there is no drag&drop functionality in the Kendo UI TreeList at this time. You can submit this as a feature request on UserVoice. As for moving items with the API, you can do so via the DataSource insert and remove methods.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. maxharn
    maxharn avatar
    11 posts
    Member since:
    Mar 2015

    Posted 26 Mar 2015 in reply to Alex Gyoshev Link to this post

    And how is than drag and drop achieved in Gantt? I believe the left panel contains TreeList?
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2510 posts

    Posted 27 Mar 2015 Link to this post

    Hello Ivo,

    I'm afraid not. The Gantt was released prior to the TreeList and contains a simpler implementation since it does not rely on most of the TreeList functionality (load on demand, locked columns).

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Jacques
    Jacques avatar
    5 posts
    Member since:
    Aug 2013

    Posted 08 Jul 2015 Link to this post

    TreeList has an option edit: { move: true } which is drag and drop (within a single tree) but I can't for the life of me find the events for it in documentation or just fishing around.  Edit, Save, and Change events don't fire on drop.  Drop doesn't seem to be an event.  Databound fires but there's no indication of the source or target nodes that I can see.

     There had to have been some event included when this was added (apparently this 1st or 2nd quarter 2015).  Without an event, I don't see how I could prevent an invalid drop.  Sure - I can come up with around this by comparing some lookup to determine the changes, and then update the model... which may be what I have to do - but I'm hoping there's an event here somewhere.

    Thanks for your help.

    Jacques

  6. Jacques
    Jacques avatar
    5 posts
    Member since:
    Aug 2013

    Posted 08 Jul 2015 Link to this post

    Unrelated to the first post - but for benefit of anyone stumbling across this - it seems the list should be on an HTML element with an ID - not some other jquery selector.  Trying with a class, even when only one of that class on the page, prevents the drop function from working.
  7. Jacques
    Jacques avatar
    5 posts
    Member since:
    Aug 2013

    Posted 08 Jul 2015 in reply to Jacques Link to this post

    Assuming your datasource isn't thousands of records, tracking this through the dataBound event was actually fairly painless by adding an original parent id field and looking for those with parentId not equal to originalParentId... running validation and reverting the change if needed, and then updating the originalParentId to the new validated parentId where validation was good.  Convoluted, yes.

    There is probably a simpler solution with an undocumented event.

     J.

  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2510 posts

    Posted 10 Jul 2015 Link to this post

    Hello Jacques,

    Thank you for bringing this to our attention. I'm afraid that at this time, there are no drag&drop events. Since the implementation is shared with the TreeView, I am logging this as a feature request to provide the same events (dragstart/drag/drop/dragend) for a future release. Once implemented, you will be able to use the drop event to validate the drag operation.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Jacques
    Jacques avatar
    5 posts
    Member since:
    Aug 2013

    Posted 11 Jul 2015 in reply to Alex Gyoshev Link to this post

    Thanks for the update Alex.

    All the best.

     J

  10. Craig
    Craig avatar
    1 posts
    Member since:
    Jun 2015

    Posted 18 Aug 2015 Link to this post

    Any updates on this?  I could really use access to those drag and drop events in multiple TreeLists (TreeList on its on, and the Gantt treelist).
  11. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2510 posts

    Posted 20 Aug 2015 Link to this post

    Hello Craig,

    The said feature is still pending implementation. Please note that the TreeList widget is not used in the Gantt widgets (both treelists are different and will require different code).

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Kendo UI user
    Kendo UI user avatar
    2 posts
    Member since:
    Nov 2016

    Posted 31 Dec 2016 Link to this post

    Any update on this? I am looking for re-order of rows feature on TreeList. Right now, I can only change the hierarchy of rows when you drag and drop, but can't drag a row from one position to another in the same hierarchy. 
  13. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2510 posts

    Posted 02 Jan Link to this post

    Reordering of TreeList rows is not supported by the widget at this time, because it introduces a model requirement (the order id field). Feel free to suggest this on UserVoice to be considered for future implementation.

    This thread has become a mixed conversation about drag&drop in the Gantt and TreeList, and further discussion becomes incoherent, so the thread is now locked.

    Regards,
    Alex Gyoshev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top