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

Drag and drop in TreeList

17 Answers 267 Views

TreeList

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

17 Answers, 1 is accepted

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.

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.

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

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

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

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();

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Drag and drop in TreeList

17 Answers, 1 is accepted