jstree does not refresh using ASP.NET MVC 4

Question

I’m currently having trouble refreshing the entire jstree; the initial tree loading works fine and refreshing child nodes also works as expected but if the data changes in the root node the tree does not refresh even the data has changed and the call to the server was made.

I will try to explain the setup of the jstree.

Global variable

var levelType;

The Tree Setup

  $("#explorer").jstree({
        plugins: ["core", "ui", "themes", "json_data", "types"],
        themes: {
            theme: "default",
            dots: false,
            url: url = '@Url.Content("~/Content/jstree/default/style.css")'
        },
             json_data: {
                 ajax: {
                     cache: false,
                     url: function (node) {
                         var nodeId = "";
                         var url = "";
                         if (node == -1) {
                             url = '@Url.Action("GetSites", "Site")';
                    } else if ($(node).attr("rel") == "station") {
                        url = '@Url.Action("GetInspections", "Inspection")' + '/' + $(node).attr("id");
                    }
                    return url;
                },
                success: function (metaData, textStatus, jqXhr) {

                    if (levelType == null || levelType == undefined || levelType == "root") {
                        //The initial node that is hard coded and will never change
                        var sitesData = [{ attr: { rel: "root" }, state: "open", data: "Root Node", children: [] }];

                        $(metaData).each(function () {
                            sitesData[0].children.push({ attr: { id: this.Id, rel: "station" }, state: "closed", data: this.Name });
                        });
                        return sitesData;
                    }

                    if (levelType == "station" || levelType == "inspection") {
                        var items = [];
                        $(metaData).each(function () {
                            items.push({ attr: { id: this.Id, rel: "inspection",    "class": "jstree-leaf" }, state: "closed", data: this.Name });
                        });

                        return items;
                    }

                    return null;
                }
            }
        },
             types: {
                 types: {
                     "station": {
                         "icon": {
                             "image": '@Url.Content("URL")'
                    }
                },
                "inspection": {
                    "icon": {
                        "image": '@Url.Content("URL")'
                }
            },
                'loading': {
                    'icon': {
                        'image': '@Url.Content("URL")'
                }
            },
                'root': {
                    'icon': {
                        'image': '@Url.Content("URL")'
                }
            }
            }
        }
 });

Tree Node Open Event

$("#explorer").bind("before.jstree", function (e, data) {
    if (data.func === "open_node") {
        levelType = $(data.args[0]).attr("rel");
    }
});

This call works and refreshes the child nodes under station level as expected

   var tree = jQuery.jstree._reference("#explorer");
   var currentNode = tree._get_node("#the node Id");
   var parent = tree._get_parent(currentNode);

   // this returns "inspection"
   levelType = $(currentNode).attr("rel");

   //the parent node is the station node
   tree.refresh(parent);

THIS CALL DOES NOT WORK but should refresh the entire tree

  var tree = jQuery.jstree._reference("#explorer");
  var currentNode = tree._get_node("#the node id");
 //set the level the tree should be refreshing its data for (this is to ensure that the tree view knows it is not at a root node).
  var parent = tree._get_parent(currentNode);
 //this returns "root"
  levelType = $(parent).attr("rel");
  tree.refresh(-1);

I hope someone can help me with this as it's driving me crazy.

Cheers

Does this help at all as a method? http://stackoverflow.com/questions/3682045/how-can-i-refresh-the-contents-of-a-jstree — Kieren Johnstone, Feb 26 '13 at 08:50
unfortunately no, the tree.jstree("refresh"); example given here is equivalent to tree.refresh(); that i have tried. Thanks for response though. — Troublesum, Feb 26 '13 at 09:22

Marz · Answer 1 · 2013-03-14T09:10:05.453

You could place the tree inside a partialview, create a div on the parent partial and render the tree partial view inside that div.

Then when you do the call to refresh the tree you can instead just do a Json get to the renderAction and replace the content of the parent partail with the content tree partial. In doing this it will be completely asynchronous and you can apply custom animations.

<div id="parent">
@Html.RenderPartial("tree")
</div>

<script>
$(function)({ 
// this could be any event
$('some id').click(function(){
//this could also be a post, we call the controller action and it returns the
//partialview
$.get("GetTree", function(data){
$('#parent').html(data);
});
});
</script>

but this will lose the state of the tree, ie what nodes are expanded. — Troublesum, Mar 19 '13 at 09:23

jstree does not refresh using ASP.NET MVC 4

1 Answers1