Treeview

3 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
    8333 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. Kendo UI is VS 2017 Ready
  4. 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. 
Back to Top