Treeview

[Nathan]

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.

[Dimo]

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

 

 

[Nathan]

Thank you for the detailed suggestion. I will try it later when I have time and will give you an update. 

[Joel]

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

[Nencho]

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

[Joel]

I will take a look at your example.  However, I have moved on to evaluating the TreeList.  This control may meet my needs better.