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

Treeview

5 Answers 145 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 1
Nathan asked on 24 Mar 2014, 06:51 PM
Does anyone have an example of building a treeview and once a node has been selected, it does a postback to a controller sending it the id of the node that was clicked?  This treeview is generated on the server and is using razor syntax.  If anyone has a pretty good example that consists of more than one line of code with a link to the docs, that would be helpful.

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 26 Mar 2014, 01:57 PM
Hello Nathan,

Let us assume that the TreeView is databound to a collection of objects, each having an "id" and "Name" properties, like in the following demo:

http://demos.telerik.com/kendo-ui/web/treeview/remote-data.html

public JsonResult Employees(int? id)
{
    var dataContext = new SampleEntities();
 
    var employees = from e in dataContext.Employees
                    where (id.HasValue ? e.ReportsTo == id : e.ReportsTo == null)
                    select new {
                        id = e.EmployeeID,
                        Name = e.FirstName + " " + e.LastName,
                        hasChildren = e.Employees1.Any()
                    };
 
    return Json(employees, JsonRequestBehavior.AllowGet);
}


Generally, you have at least two options:

1. Subscribe to the TreeView's select event, retrieve the item id and post it to the server via AJAX.

http://docs.telerik.com/kendo-ui/api/web/treeview#events-select

@(Html.Kendo().TreeView()
    .Name("treeview")
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("Employees", "TreeView")
        )
    )
    .Events(ev => ev.Select("onSelect"))
)


function onSelect(e) {
    var id = e.sender.dataItem(e.node).get("id");
    alert(id);
    $.post( /* ... */ );
}


2. Use a TreeView item template with hyperlinks.

@(Html.Kendo().TreeView()
    .Name("treeview")
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("Employees", "TreeView")
        )
    )
    .Template("<a class='myLink' href='/Controller/Action/#: item.id #'>#: item.Name #</a>")
)

.myLink
{
    color: inherit;
    text-decoration: none;
}


Note that the above template is a client template, i.e. the data item values are available on the client, not the server.

If the TreeView in your case is server-bound, then you can do something like this:

(each data item has a CategoryID and CategoryName properties)

@(Html.Kendo().TreeView()
    .Name("treeview-right")
    .BindTo((IEnumerable<CategoryItem>)ViewBag.inline, (NavigationBindingFactory<TreeViewItem> mappings) =>
    {
        mappings.For<CategoryItem>(binding => binding.ItemDataBound((item, category) =>
            {
                item.Text = category.CategoryName;
                item.Url = "/Controller/Action/" + category.CategoryID;
            })
            .Children(category => category.SubCategories));
 
        mappings.For<SubCategoryItem>(binding => binding.ItemDataBound((item, subCategory) =>
        {
            item.Text = subCategory.SubCategoryName;
        }));
    }))

or 

(data items have an Id property)

@(Html.Kendo().TreeView()
    .Name("treeview-left")
    .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.inlineDefault)
    .ItemAction(item =>
    {
        item.Url = "/Controller/Action/" + item.Id;
    }))


Instead of defining the URL as a string, you can also use

.ItemAction(item =>
{
    item.ActionName = "Action";
    item.ControllerName = "Controller";
    item.RouteValues = new RouteValueDictionary(new { id = item.Id });
})


Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nathan
Top achievements
Rank 1
answered on 26 Mar 2014, 02:03 PM
Thank you for the detailed suggestion. I will try it later when I have time and will give you an update. 
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 14 Dec 2018, 06:26 PM

I am providing drag/drop functionality from the TreeView.  So, performing an action on selection of a node doesn't work.  How would I put an edit link (similar to Default Razor pages) on each node?  Similar to this:

<a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
0
Nencho
Telerik team
answered on 18 Dec 2018, 02:12 PM
Hello Joel,

In order to put an edit link in the nodes of the TreeView, you can use the Templates of the items. In this demo, you can observe how you can implement a button in the template and use its click handler to trigger any subsequent action.

Regards,
Nencho
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 18 Dec 2018, 04:40 PM
I will take a look at your example.  However, I have moved on to evaluating the TreeList.  This control may meet my needs better.
Tags
General Discussions
Asked by
Nathan
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Nathan
Top achievements
Rank 1
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Nencho
Telerik team
Share this question
or