Jstree not updating with ASP.NET MVC 4

Question

I am currently having problems updating all of jstree; bootstrap of the tree works fine, and updating child nodes also work as expected, but if the data changes in the root directory of the node, the tree is not updated, even the data has been changed, and a server call has been called.

I will try to explain jstree setup.

Global variable

var levelType; 

Tree setting

  $("#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 updates the child nodes below the 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 must update the whole 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); 

Hope someone can help me with this, as it drives me crazy.

Greetings

Answer 1

You can place the tree inside the partial view, create a div on the parent partial image and display the partial view of the tree inside this div.

Then, when you make a call to update the tree, you can just do Json to get renderAction and replace the contents of the parent partail with a partial content tree. However, 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>