Jquery TreeView unexpand nodes

Question

I have a TreeView rendered inside a dialog box. With the dialog box I have a Clear Selections button, My Question is how do I restore the treeview to the default un-expanded state.

Currently If I expand the nodes within the treeview and hit the clear button and open the dialog box again, the tree view is still expanded.

On document.ready for my Dailog box Javascript file, I have the following to initialize the treeview. Should I put this inside a function and upon clear button in dialog box, call this function again to reset?

JS File

//This load the tree view on document ready

$("#parts ul").treeview({
  persist: "location",
  collapsed: true,
  prerendered: false
});

Clear: function () {
  $('#partTreeView :checked').removeAttr('checked');
  $("#PartDisplay").text('');
  $("#inputReps").text('');
  $("#parts").attr("style", "display:inline;");
  $("#inputParts").attr("style", "display:none;");
  PartDialog.dialog("destroy");
  //Toggle/Un-expand tree view here if already expanded here
}

View HTML


 
  
    @Html.Label("Select Parts")
  
  
    Click here to Select Parts
    

    
    @Html.HiddenFor(model => model.PartDescription)
    
  




  
    
    @Html.RenderTree(CacheHelper.Parts(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "part")

Nope · Accepted Answer

A treeview can have a tree view control. That control is bound by the tree view script to 3 actions: collapse tree, expand tree and toggle tree.

The tree view control has to be an element containing 3 anchor links, one for each action.

To add a tree view control add the following HTML below or above your treeview:


   collapse  expand  toggle

You can delete the text between the anchor tags to have an "invisible" control if you don't want the users to be able to collapse/expand/toggle and only plan to collapse the tree programmatically.

To let the tree view script know about the control so it can bind the 3 actions to it, add the following to your treeview:

$("#parts ul").treeview({
    persist: "location",
    collapsed: true,
    prerendered: false,
    control: "#myTreeviewcontrol"
});

To programmatically collapse the tree now you simply trigger the first link in your control, like this:

$('#myTreeviewcontrol a:eq(0)').click();

DEMO - Programmatically collapsing the tree

In the above DEMO I left the text in the anchors so you can use them too if you like. I added a button at the bottom of the tree that when clicked, will collapse the tree by programmatically triggering the control's collapse link

Applying those changes

To apply those changes to your code would involve a change to your HTMLview and the script.

Your view changes:



  
  
    
  

  
    //This line renders the treeview just fine 
    @Html.RenderTree(CacheHelper.Parts(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "part")

Your script changes:

// Let the treeview know "who" your controller is
$("#parts ul").treeview({
  persist: "location",
  collapsed: true,
  prerendered: false,
  control: "#myTreeviewcontrol" // <-- Assign id of controller to control option
});

Now your treeview and the treeview controller are bound and the controller knows which treeview to collaps when the collaps link is clicked.

// Tell your controller to collapse the tree
Clear: function () {
  $('#partTreeView :checked').removeAttr('checked');
  $("#PartDisplay").text('');
  $("#inputReps").text('');
  $("#parts").attr("style", "display:inline;");
  $("#inputParts").attr("style", "display:none;");
  PartDialog.dialog("destroy");
  //Toggle/Un-expand tree view here if already expanded here
  $('#myTreeviewcontrol a:eq(0)').click(); //<-- Tell the treeview controller to collaps the treeview it is bound to
}

Adding the last line triggers the click event of the first link in the treeview controller, causing the controller to collaps the treeview it has been associated with.

Additional Notes

The tree view script will always expect 3 links inside the element you assign as the control and always bind the actions in the exact same order as mentioned at the start.

1st link = collapse tree
2nd link = expand tree
3rd link = toggle tree

Looking at the jQuery TreeView source there is the following code showing how it works (at the bottom of the function you see how it triggers the links):

// factory for treecontroller
function treeController(tree, control) {
  // factory for click handlers
  function handler(filter) {
    return function () {
      // reuse toggle event handler, applying the elements to toggle
      // start searching for all hitareas
      toggler.apply($("div." + CLASSES.hitarea, tree).filter(function () {
        // for plain toggle, no filter is provided, otherwise we need to check the parent element
        return filter ? $(this).parent("." + filter).length : true;
      }));
      return false;
    };
  }
  // click on first element to collapse tree
  $("a:eq(0)", control).click(handler(CLASSES.collapsable));
  // click on second to expand tree
  $("a:eq(1)", control).click(handler(CLASSES.expandable));
  // click on third to toggle tree
  $("a:eq(2)", control).click(handler());
}

Jquery TreeView unexpand nodes

Answers (1)

Applying those changes

Additional Notes

Related Questions