TreeList Drag/Drop MVC

[Joel]

I need to be able to handle the Drag/Drop activity.  I see no examples on how to capture the Drop or DropEnd events when doing this from an ASP.NET Core MVC application.  How do I hand off all the appropriate values to the controller?  Is this one call to both remove the node from the existing parent and register the node with the new parent?

TreeList

@(Html.Kendo().TreeList<NameValueParent>()
      .Name("treelist")
      .Columns(columns =>
      {
          columns.Add().Command(c => { c.Custom().Text("Select")
              .Name("selectButton").ClassName("selectButton")
              .Click("goDetail"); })
              .Width(Glossary.Portal.ButtonWidth);
          columns.Add().Field(e => e.Name);
          columns.Add().Width(330).Command(c =>
          {
              c.CreateChild().Text("Add");
              c.Edit();
              c.Destroy();
          })
              .HtmlAttributes(new
              {
                  style = "text-align: center;"
              });
      })
      .Events(ev => ev.DataBound("onDataBound"))
      .Editable(e => e.Move(true))
      .Selectable(s => s.Mode(TreeListSelectionMode.Single))
      .DataSource(dataSource => dataSource
          .Create(create => create.Action("Create", "Site"))
          .Read(read => read.Action("IndexJson", "Site").Data("getData"))
          .Update(update => update.Action("Update", "Site"))
          .Destroy(delete => delete.Action("Destroy", "Site"))
          .ServerOperation(false)
          .AutoSync(true)
          .Model(m =>
          {
              m.Id(f => f.Id);
              m.ParentId(f => f.ParentId);
              m.Expanded(true);
              m.Field(f => f.Name);
          }).Events(events =>
          {
              events.Error("onError");
          })
      )
    .Events(events => events.DragEnd("goDropEnd()"))
    .Height(540))

Script

function goDropEnd(e) {
    alert("goDropEnd");
    alert("I have no idea what to do here");
}

[Anton Mironov]

Hello, Joel,

Thank you for the provided code snippets.

In order to use the DragEnd event, only the name of the JavaScript functions has to be provided without the parenthesis. Otherwise, the handler will be executed the first time the widget gets initialized. The event will execute the JavaScript function when the current drag action is completed.

.Events(events => events.DragEnd("goDropEnd")

The event sent parameter "e"' includes information such as the element, that is reflected, the element on which you clicked, and much more.

function goDropEnd(e) {

        // Log dragged element into the console
        console.log(e.source);
    }

Sending the data to the controller could be achieved with the help of a custom ajax request.

 

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik