Event Handler Example

[Joel]

I need a TreeView example for ASP.NET Core 2.2 that uses Binding and shows me how I can capture the drag/drop events from the control with some context information.  Your example shows that it can be done but I see no way to capture the data item that is bound to the node or even wire up a KeyValue to a node so when it is clicked that I have a breadcrumb back to my data store. 

I appreciate your help,

Joel

My current TreeView:

    Html.Kendo().TreeView()
        .TemplateId("treeview-template")
        .DragAndDrop(true)
        .Name("kendoTreeView")
        .Events(events => events
            .Change("onChange")
            .Select("onSelect")
            .Drop("onDrop")
            .DragEnd("onDragEnd")
        )
        .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<Group>(binding => binding.ItemDataBound((item, group) =>
            {
                item.Text = group.Name;
                item.Id = $"{group.Id}";
                item.ImageUrl = group.ImageUrl;
                item.Expanded = true;
            })
                .Children(group => group.Children));
        })
          )

<script>
    var treeview;

    function onSelect(e) {
        alert(e.node);
    }

    function onChange(e) {
        alert(e.node);
    }

    function onDrop(e) {
        alert(e.node);
    }

    function onDragEnd(e) {
        alert(e.node);
    }

    $(document).ready(function() {
        treeview = $("#treeview").data("kendoTreeView");
    });
</script>

 

[Ivan Danchev]

Hello Joel,

You can get the dataItems of the source (dragged) and destination (the one you drop over) node in both Drop and DragEnd event handlers identically as shown below:

function onDrop(e) {
  var sourceNodeDataItem = e.sender.dataItem(e.sourceNode);
  console.log("Source Node DataItem: ", sourceNodeDataItem);

  var destinationNodeDataItem = e.sender.dataItem(e.destinationNode);
  console.log("Destination Node DataItem: ", destinationNodeDataItem);
}

function onDragEnd(e) {
   var sourceNodeDataItem = e.sender.dataItem(e.sourceNode);
  console.log("Source Node DataItem: ", sourceNodeDataItem);

  var destinationNodeDataItem = e.sender.dataItem(e.destinationNode);
  console.log("Destination Node DataItem: ", destinationNodeDataItem);
}

Regards,
Ivan Danchev
Progress Telerik

[Joel]

Okay.  This helps.  But, once I capture the dataItem how do I post this value to the controller (ASP.NET Core MVC)?

I'd like to select a node and press a button or select an edit link on the node and have it move over to an Edit state or view.  This would be nice (example):

Html.Kendo().TreeView()
    .DragAndDrop(true)
    .Name("kendoTreeView")
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read("Hierarchy", "Groups")
        .Update("Edit", "Groups")))

 

But, DataSource.Update doesn't exist, the DataSource.Read never returns anything... and the ExpandAll(true) function doesn't work.  Instead, I get success with this definition:

<div class="demo-section k-content">
    <h4>Customer Groups</h4>
    @(
        Html.Kendo().TreeView()
            .DragAndDrop(true)
            .Name("kendoTreeView")
            .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
                mappings.For<Group>(binding => binding.ItemDataBound((item, group) =>
                {
                    item.Text = group.Name;
                    item.Id = $"{group.Id}";
                    item.Url = "/Groups/Details/" + group.Id;
                    item.ImageUrl = group.ImageUrl;
                }).Children(group => group.Children));
            })
            .Events(events=> events
                .DataBound("onDataBound"))
            )
</div>

<script>
    function onDataBound(e) {
        var treeviewInstance = e.sender;
        treeviewInstance.expand(".k-item");
    }

</script>

 

To be clear, I do have success showing this but its not good application behavior to jump to an Edit view on click of a node.  What I need is Edit and Delete links on each node (like the Grid.Row) or the ability to click a button on the page that captures the treeview and gives me enough information about the selected node to perform the selected action on a Controller. 

 

[Joel]

I've given up on the TreeView.  My impression is that it is a 2nd class citizen to other Telerik controls.  I'm over trying the TreeList, now.

[Ivan Danchev]

Hello Joel,

The TreeView belongs to the Navigation group of widgets, which includes the Menu, TabStrip, PanelBar, etc. The widgets from this group do not have the built-in editing capabilities that the more complex widgets from the Data Management group (Grid, TreeList, etc.) posses.

Regards,
Ivan Danchev
Progress Telerik