[Solved] TreeView Databound Template

[David Wright]

I am trying to get a treeview control to databind to the Model which is working but use a template for each item to a Ajax.ActionLink. via

@{Html.Telerik().TreeView()
    .Name("ModelItems")

        .BindTo(Model.Items, mappings =>
        {
            mappings.For<Three.MicrosoftSolutions.ServerDatabase.Client.Controllers.Navigation.ViewModels.NavigationItem>(binding => binding
                .ItemDataBound((item, navigationItem) =>
                    {
                        item.Content = () =>
                            {
                                @Ajax.ActionLink("Test", "Test", new AjaxOptions { UpdateTargetId = "testid" });
                            };

                    })
                    );
        }
    ).Render();
    }

However nothing gets rendered other than: 

<li class="t-item"><div class="t-mid"><span class="t-icon t-plus"></span><a class="t-link t-in" href="#ModelItems-18"></a></div><div class="t-content" id="ModelItems-18" style="display:none"></div></li>

Why does this template not get run?

Cheers
Dave

[T. Tsonev]

Hello David,

Templates should be defined using the <text> tag instead of using a render action.

currentItem.Template.InlineTemplate =
@<text>
    @Ajax.ActionLink("Test", "Test", new AjaxOptions { UpdateTargetId = "testid" });
</text>;

Note that the Content property does not accept such templates, so we must use Template.InlineTemplate for now. A running sample is available in the attached project.

Please see this help topic for more tips & tricks on using the Razor view engine.

Best wishes,
Tsvetomir Tsonev
the Telerik team

[T. Tsonev]

Hi,

I'm revisiting this thread and I see that my proposed solution is actually solving the wrong problem.

Instead of trying to put another link in the tree node we can use the one that is already there. The ActionLink in MVC3 works with data attributes and we can apply them too:

.ItemDataBound((currentItem, navigationItem) =>
{
    currentItem.Text = navigationItem.Text;
    currentItem.Expanded = true;
    currentItem.ActionName = "Content";
    currentItem.ControllerName = "Home";
    currentItem.LinkHtmlAttributes.Add("data-ajax", "true");
    currentItem.LinkHtmlAttributes.Add("data-ajax-mode", "replace");
    currentItem.LinkHtmlAttributes.Add("data-ajax-update", "#container");
})

Make sure you include the jquery-unobtrusive-ajax.min.js script on the page. I'm attaching a sample project.

Regards,
Tsvetomir Tsonev
the Telerik team

[Deven]

Hi,

How do I pass a parameter to the Action in the controller?
For example if I want to pass the Id of the selected item to the action in the controller here? How can this be done?

Regards,
Deven

[Phil]

Hi

I found this really useful; however, I'm also using AJAX to load child items on demand.

I cannot see how to set the LinkHtmlAttributes in my controller as this property is readonly and set for [ScriptIgnore]; therefore when I return my IEnumerable<TreeViewItem> nodes a full postback occurs

View

@(Html.Telerik().TreeView()
        .Name("TreeView")
        .BindTo<Release>(Model, (item, release) =>
        {
            item.Text = release.Name;
            item.Value = release.ReleaseId.ToString();
            item.LoadOnDemand = release.ChildReleases.Count > 0;
            item.Action("Dashboard", "Release", new { id = release.ReleaseId });
            item.LinkHtmlAttributes.Add("data-ajax", "true");
            item.LinkHtmlAttributes.Add("data-ajax-mode", "replace");
            item.LinkHtmlAttributes.Add("data-ajax-update", "#mainPanel");
        })

        .DataBinding(dataBinding => dataBinding
            .Ajax()
                .Select("_GetChildReleases", "Release"))

        )

Controller

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult _GetChildReleases(TreeViewItem node)
{
       IEnumerable<TreeViewItem> nodes =
           from r in db.releases
           select new TreeViewItem
           {
               Text = r.Name,
               Value = r.ReleaseId,
               LoadOnDemand = (r.ChildReleases.Count > 0),
               Enabled = true,
               Url = Url.Action("Dashboard", new { id = r.ReleaseId })
           };

       return new JsonResult() { Data = nodes };

}

Many thanks,

Phil

[Marcin]

Phil

Have you found any solution for your problem ? I have very similar.

Marcin