How can I initialize jsTree on a dynamically loaded ASP.NET MVC Partial View that is called via an Ajax.ActionLink

Question

I want to create an ASP.NET MVC 5 application that uses jsTree (http://www.jstree.com). I am using ASP.NET AJAX to dynamically load a page during runtime. Where can I initialize jsTree on the dynamically loaded partial view?

When I start the web application everything is ok. I see the tree like this:

enter image description here

But now I click on 'Change Tree View' and a partial view is loaded via an Ajax.ActionLink. Now the tree will not be rendered as a TreeView but only as a normal list:

enter image description here

You can initialize the tree like this:

$('#treeView').jstree();

How can I initialize the TreeView for the partial view that is dynamically loaded? I tried the OnComplete callback function of the Action Link but that did not work.

TreeTest\Controllers\HomeController.cs:

using System.Web.Mvc;

namespace TreeTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public PartialViewResult ChangeTreeView()
        {
            return PartialView();
        }
    }
 }

TreeTest\Views\Shared_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link rel="stylesheet" href="/Content/vakata-jstree-a0767ce/dist/themes/default/style.min.css" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                </ul>
                <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery",
                    "~/bundles/jqueryajax")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/scripts")
    @RenderSection("scripts", required: false)
    <script src="/Content/vakata-jstree-a0767ce/dist/jstree.min.js"></script>
</body>
</html>

TreeTest\Views\Home\Index.cshtml:

@{
     ViewBag.Title = "Home Page";
}

<div id="treeView">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>
            Item 4
            <ul>
                 <li>Item 4.1</li>
            </ul>
        </li>
    </ul>
</div>

@Ajax.ActionLink("Change Tree View", "ChangeTreeView", new RouteValueDictionary(), new AjaxOptions { UpdateTargetId = "treeView", OnComplete = "TreeViewChangeOnComplete" })

TreeTest\Views\Home\ChangeTreeView.cshtml:

<ul>
    <li>New Item 1</li>
    <li>New Item 2</li>
    <li>New Item 3</li>
    <li>
        New Item 4
        <ul>
            <li>New Item 4.1</li>
        </ul>
    </li>
</ul>

TreeTest\Scripts\JavaScript.js:

$(document).ready(function () {
    $('#treeView').jstree();
});

function TreeViewChangeOnComplete() {
    $('#treeView').jstree();
}

vakata · Accepted Answer · 2015-05-12 14:03:17Z

2

I am not familiar with the way .NET works, but my guess is it simply swaps the HTML contents of the specified element with the one loaded from the AJAX call.

Since the instance is already created on the node (#treeView), the second jstree call does nothing (actually it simply retrieves the already existing instance).

I am guessing and have not tested this, but give it a try:

function TreeViewChangeOnComplete() {
    $('#treeView').jstree(true).destroy(true);
    $('#treeView').jstree();
}

answered May 12, 2015 at 14:03

vakata

3,8961 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

3 rules Over a year ago

Ohhhh got solution after longtime , just remove my headache dear @vakata sir

Collectives™ on Stack Overflow

How can I initialize jsTree on a dynamically loaded ASP.NET MVC Partial View that is called via an Ajax.ActionLink

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related