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

Event Handler Example

4 Answers 24 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 12 Dec 2018, 12:19 AM

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>

 

4 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 14 Dec 2018, 02:55 PM
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
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
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 14 Dec 2018, 07:12 PM

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

    .ExpandAll(true)

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

 

0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 14 Dec 2018, 10:41 PM
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.
0
Accepted
Ivan Danchev
Telerik team
answered on 18 Dec 2018, 03:26 PM
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
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.
Tags
TreeView
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Ivan Danchev
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or