Treeview

6 posts, 0 answers
  1. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 24 Mar 2014 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8445 posts

    Posted 26 Mar 2014 Link to this post

    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!
     
  3. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 26 Mar 2014 in reply to Dimo Link to this post

    Thank you for the detailed suggestion. I will try it later when I have time and will give you an update. 
  4. Joel
    Joel avatar
    55 posts
    Member since:
    Jun 2018

    Posted 14 Dec 2018 Link to this post

    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> |
  5. Nencho
    Admin
    Nencho avatar
    1788 posts

    Posted 18 Dec 2018 Link to this post

    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.
  6. Joel
    Joel avatar
    55 posts
    Member since:
    Jun 2018

    Posted 18 Dec 2018 in reply to Nencho Link to this post

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