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

TreeList Drag/Drop MVC

1 Answer 21 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 15 May 2020, 08:11 PM

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");
}

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 20 May 2020, 02:37 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TreeList
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Anton Mironov
Telerik team
Share this question
or