Html.ActionLinks in TreeView Template

1 posts, 0 answers
  1. Coy
    Coy avatar
    2 posts
    Member since:
    May 2013

    Posted 14 Apr 2014 Link to this post

    Hey guys,

    I have a solution for adding Html.ActionLink to the Template of a TreeView control.  I searched everywhere for something similar and I was unable to find it, so I'm going to post it here in hopes that it might help others in the same predicament.

    I am using the razor pages for my implementation so I, for the most part, setup my TreeView control exactly like the Remote Data Binding demo found here: http://demos.telerik.com/kendo-ui/web/treeview/remote-data.html 

    My Tree View control looks like this:

    <div>
           @(Html.Kendo().TreeView()
            .Name("treeview")
            .DataTextField("DisplayValue")
            .DataSource(dataSource => dataSource
                .Read(read => read
                    .Action("CategoryTree", "Category")
                    )
                )
            )
     </div>

    In my case, I wanted to add a couple of Action Links to the end of each item, in this categories.  The purpose of the action link was to navigate to a screen to allow the user to edit the items in the category tree.  I searched everywhere but could not find a way to do this.  I even came across a few posts stating that this was not possible.

    I chose to use .Template() to add the action links.

    Here's what I added to my tree to add an action link.

    .Template("#: item.DisplayValue #  " + @Html.ActionLink("Update", "Update", new { id = "newId" })
    .ToHtmlString().Replace("newId", "#: item.id #"))


    After I added one, I added a second that would navigate to another page.  My final tree view control looks like this:

    <div style="padding-top: 10px;">
     
        @(Html.Kendo().TreeView()
            .Name("treeview")
            .DataTextField("DisplayValue")
            .DataSource(dataSource => dataSource
                .Read(read => read
                    .Action("CategoryTree", "Category")
                    )
                )
                .Template("#: item.DisplayValue #  " + @Html.ActionLink("Update", "Update", new { id = "newId" })
                .ToHtmlString().Replace("newId", "#: item.id #") + " | " + @Html.ActionLink("Deactivate", "Deactivate", new { id = "newId" })
                .ToHtmlString().Replace("newId", "#: item.id #"))
            )
    </div>


    I hope this helps someone out because it's not documented anywhere.

    Cheers!
Back to Top