Jquery TreeView unexpand nodes

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:

<div id="myTreeviewcontrol">
  <a href="#"> collapse </a><a href="#"> expand </a><a href="#"> toggle </a>
</div>

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:

<div id="partTreeView" title="Dialog Title" style="font-size: 10px; font-weight: normal;
            overflow: scroll; width: 800px; height: 450px; display: none;">

  <!-- You could insert Tree View Controller here -->
  <div id="myTreeviewcontrol">
    <a href="#"></a><a href="#"></a><a href="#"></a>
  </div>

  <div id="parts">
    //This line renders the treeview just fine 
    @Html.RenderTree(CacheHelper.Parts(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "part")
  </div>
  <div id="inputParts" style="display: none;"></div>
  <div id="inputPartTemp" style="display: none;"></div>
</div>

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());
}