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

<!-- This div opens the dialog box -->
<div class="bodyContent"> 
  <span class="leftContent">
    @Html.Label("Select Parts")
  </span>
  <span class="rightContent">
    <span id="PartChildDialogLink" class="treeViewLink">Click here to Select Parts</span>
    <br />
    <span id="PartDisplay"></span>
    @Html.HiddenFor(model => model.PartDescription)
    <input id="ServiceEntryID" type="hidden" value="0" />
  </span>
</div>

<!-- This div contains the dialog box and the tree viwe rendered inside of it -->
<div id="partTreeView" title="Dialog Title" style="font-size: 10px; font-weight: normal; overflow: scroll; width: 800px; height: 450px; display: none;">
  <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>

Answer 1

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