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

Drag and drop in TreeList

17 Answers 157 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Mateusz
Top achievements
Rank 1
Mateusz asked on 05 Aug 2015, 06:34 AM
Hi 

I would you ask for example how to turn on drag and drop function in tree list.
I saw it in your demo and now I can't find any example of code how to configure this feature. 
It is similar to tree list? 

Thanks,
Mateusz

17 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 06 Aug 2015, 07:24 AM
Hi Mateusz,

This is a relatively new feature (introduced with the Q2 2015 release) that can be enabled using the editable.move option, as seen in this demo.

Regards,
Alexander Popov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Mateusz
Top achievements
Rank 1
answered on 06 Aug 2015, 01:26 PM

Thank you for answer. Problem was with to old version of Telerik in my project.

I have also another few questions:
1) So because this is new feature, are there implemented drag and drop events?
2) How I can save order of items after some movement?

Regards, 
Mateusz

0
Alexander Popov
Telerik team
answered on 10 Aug 2015, 12:19 PM
Hello again Mateusz,

Yes, drag and drop events are on our to-do list, however at this point I cannot give you a time-frame in which they will be available. Since the events are not yet implemented, detecting the drag and drop become a bit difficult. Enabling the DataSource's autoSync option might help you get the desired results.

Regards,
Alexander Popov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jean-Philippe
Top achievements
Rank 1
answered on 17 Sep 2015, 05:21 PM

Hello,

I tried autoSync with no succes, the parent id field posted does not represent the drag done. Is there any way we can persist drag as shown in this demo? http://demos.telerik.com/kendo-ui/treelist/dragdrop

Thank you
0
Alex Gyoshev
Telerik team
answered on 21 Sep 2015, 03:02 PM

Hello Jean-Philippe,

This example shows that the parentId field (ReportsTo) is correctly updated (logged to console). Can you please provide a sample that shows the problem?

Regards,
Alex Gyoshev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jean-Philippe
Top achievements
Rank 1
answered on 21 Sep 2015, 03:19 PM

 Hello Alex,

Thanks for your answer.

If I run your exemple with 2015 Q2 SP1 the reportsTo field is always the same regardless were I drop it.

I am currently using 2015 Q2 SP2 (v2015.2.827) wich I downloaded from UI for asp.net MVC 2015.2.805 but this version is not available in the dojo.

I just saw a bug fix regarding this in the beta version that I am unable to download http://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-q3-2015-beta

TreeList drag&drop with autoSync enabled doesn't send corrent parent id field

 

I guess I'll just have to wait.

0
Alex Gyoshev
Telerik team
answered on 23 Sep 2015, 08:16 AM

Hello Jean-Philippe,

Indeed, it appears that the bug has been fixed after the official 2015 Q2 SP2 release. The fix will be available in the next internal build (later this week), and as part of the 2015.Q3 release at the end of this month.

Regards,
Alex Gyoshev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Chris
Top achievements
Rank 1
answered on 14 Jul 2017, 02:21 AM
Two years later and still no sign of the drag and drop events. For this reason, I'm going to go with DHTMLX library instead of Telerik. The drag and drop events are very important and it's a shame because apart from this, the toolset is pretty refined.     
0
Chris
Top achievements
Rank 1
answered on 14 Jul 2017, 03:00 AM
Just to confirm - this is the functionality I wanted from the Kendo UI library (in an MVC project) http://demos.telerik.com/aspnet-ajax/treelist/examples/itemsdragdrop/defaultcs.aspx   - which looks amazing. The ability to drag and drop between trees. Great!     
0
Stefan
Telerik team
answered on 17 Jul 2017, 08:28 AM
Hello Chris,

The Kendo UI TreeList does supports drag and drop events.

More information about the events can be found in the documentation:

http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events-drag

http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events-dragstart

http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events-dragend

http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events-drop

More information for the Drag and Drop between TreeLists can be found in the following forum thread:

http://www.telerik.com/forums/drag-and-drop-between-treelists

I hope that these events will help to achieve the desired result.

Regards,
Stefan
Progress Telerik
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 (charts) and form elements.
0
Matthew
Top achievements
Rank 1
Veteran
answered on 27 Feb 2019, 02:25 PM
Where is this event in MVC?
0
Viktor Tachev
Telerik team
answered on 01 Mar 2019, 09:30 AM
Hello Matthew,

The events for the MVC wrapper can be configured in the .Events option. Check out the resources below that elaborate in more detain on event handling for the TreeList component in MVC:


Defining handlers for the drag and drop related events would look like below:


.Events(events => {
    events.Drag("onDrag");
    events.DragStart("onDragStart");
    events.DragEnd("onDragEnd");
})


JavaScript:


<script>
    function onDrag(e) {
        // handle drag event
    }
 
    function onDragStart(e) {
        // handle dragStart event
    }
     
    function onDragEnd(e) {
        //handle dragEnd event
    }
</script>


Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

0
Pierre
Top achievements
Rank 1
answered on 19 Jan 2021, 01:55 PM
How to persist the re-ordered treelist? Thx
0
Viktor Tachev
Telerik team
answered on 21 Jan 2021, 11:33 AM

Hello Pierre,

 

If you would like to enable changing the order of items in the TreeList on all items then I suggest enabling the Editable.Move.Reorderable property. Check out the following demo that illustrates how the functionality works:

https://demos.telerik.com/aspnet-mvc/treelist/dragdrop

 

In order to persist the settings of the TreeList component you can use the getOptions and setOptions methods. The approach for persisting the state will be similar to the one showcased for the Grid in the example below:

https://demos.telerik.com/aspnet-mvc/grid/persist-state



Regards,
Viktor Tachev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Pierre
Top achievements
Rank 1
answered on 27 Jan 2021, 03:01 PM

Thank you Viktor. I have been playing around with the widgets to get a sense of how they're meant to work.
Unfortunately I'm not really getting closer to my goal which is to save the sorting order of the element of the treelist once I've done a drag&drop.

My model has Id, parentId and SortOrder as properties.

function onDragEnd(e) {
    console.log('onDragEnd ----------------');
    console.log('source :');
    console.log(e.source);

    e.source.SortOrder = e.destination.SortOrder - 1;
    e.source.dirty = true;
    e.source.dirtyFields = { field: "SortOrder" };
}

I can click the "Edit" button after the function has been called and this work.

How do I skip that step by calling the ".Update(create => create.Action("Update", "FilterTag"))" straight from the onDragEnd function?

I hope the simple thing I'm trying to do is clearer this time around and that you can point me in the proper direction.

Thanks


0
Viktor Tachev
Telerik team
answered on 28 Jan 2021, 12:29 PM

Hi Pierre,

In order to persist the changes that are made you can call the DataSource sync method. Like this:

 

function onDragEnd(e) {
    console.log('onDragEnd ----------------');
    console.log('source :');
    console.log(e.source);

    e.source.SortOrder = e.destination.SortOrder - 1;
    e.source.dirty = true;
    e.source.dirtyFields = { field: "SortOrder" };
	
    this.dataSource.sync();
}

 

Let me know how the suggestion works for you.

 

Regards,
Viktor Tachev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Pierre
Top achievements
Rank 1
answered on 11 Feb 2021, 08:08 AM

Thanks.

After a lot of trial and errors to figure out this simple code (in Telerik V2020.1):

@(Html.Kendo()
      .TreeList<Item>()
      .Name("TreeList")
      .Toolbar(toolbar => toolbar.Create())
      .Columns(columns => {
                   columns.Add().Field(e => e.NameInFr);
                   columns.Add().Field(e => e.NameInNl);
                   columns.Add()
                          .Width(300)
                          .Command(c => {
                                       c.CreateChild();
                                       c.Edit();
                                       c.Destroy();
                                   });
               })
      .Editable(e => e.Mode(TreeListEditMode.PopUp)
                      .Move(move => move.Reorderable(true)))
      .Events(events => {
                  events.DragEnd("onDragEnd");
              })
      .DataSource(dataSource => dataSource
                          .Read(read => read.Action("GetAll", "MyController"))
                          .Create(create => create.Action("Insert", "MyController"))
                          .Update(create => create.Action("Update", "MyController"))
                          .Destroy(delete => delete.Action("Delete", "MyController"))
                          .Model(m => {
                                     m.Id(f => f.Id);
                                     m.ParentId(f => f.ParentId);
                                     m.Expanded(true);
                                     m.Field(f => f.ParentId);
                                     m.Field(f => f.NameInFr);
                                     m.Field(f => f.NameInNl);
                                 })))

 

and to persit ordering change:

function onDragEnd(e) {
    e.source.SortOrder = e.destination.SortOrder - 1;
    e.source.dirty = true;
    e.source.dirtyFields = { field: 'SortOrder' };
 
    $('#TreeList').getKendoTreeList().dataSource.sync();
}
Tags
TreeList
Asked by
Mateusz
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Mateusz
Top achievements
Rank 1
Jean-Philippe
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Chris
Top achievements
Rank 1
Stefan
Telerik team
Matthew
Top achievements
Rank 1
Veteran
Viktor Tachev
Telerik team
Pierre
Top achievements
Rank 1
Share this question
or