TreeView - Standard look and feel + checkboxes

Sep 4, 2013 at 9:41 PM
I am using your helper for the first time and I don't see many examples. I want it to look like most treeviews look:

o) Starts with all nodes closed
o) with lines and such
o) but with checkboxes

I'd also like to select/unselect all the child nodes with a parent is selected/unselected.

Here is what I am using so far:

@Html.TreeViewFor(
        m => m.RootNode.ChildNodes,
        i => "ChildNodes",
        ExternalContainerType.span,
        "treeview-gray",
        new object[]
        {
            _S.L<EmailNotification.Models.cTreeNode>(h => h.DisplayFor(m => m.NodeName).ToString())
        },
        (x, y) => 0,
        null,
        null,
        null,
        TreeViewMode.Display,
        null,
        (x, y) => TreeViewItemStatus.Hide,
        null
    )
Thanks in advance...
-Bobby
Coordinator
Sep 6, 2013 at 9:10 AM
Some examples of usage are in the documentation: https://mvccontrolstoolkit.codeplex.com/wikipage?title=TreeView

A working example is contained in the BinariesWithSimpleExamples file in the download area. Maybe examples are in aspx, instead of Razor, since the TreeView was one of the first controls implemented.

As for having all nodes closed: (x, y) => TreeViewItemStatus.Hide is OK!

About your checkboxes. The Treeview has some NATIVE checkboxes, when it is in edit mode, but they help just in selecting a new father where to drag a node. If you want your custom checkboxes for, say some selecting purposes. You need simply to furnish a template containing a checkbox!
    new object[]
    {
        _S.L<EmailNotification.Models.cTreeNode>(h => h.DisplayFor(m => m.NodeName).ToString())
    }
Is an array of templates, You may provide a couple templates (say for folder nodes and leaf nodes) or an unique template for all nodes with an in line Razor helper. See the documentation on templates: https://mvccontrolstoolkit.codeplex.com/wikipage?title=Use%20of%20Templates

Inside the Razor in line template you may put everything you would put in a Razor View. The HTML keyword is substituded by item, so you write something like @item.CheckBoxFor(m =>....). Add a common class, say "custom-selection" to all your checkboxes so you may recognize them...in the algorithm below.

In order to handle the click event of the checkbox, just add a click handler to any Html node that incluces the whole tree. Click events bubbles up, so you will catch all clicks of all checkboxes there.
Once you get a click or change checkbox event, extracts the event target (the original node that caused the click) and find the closest li: myTarget.closest('li'). This will be the root node of the sub-tree containing your checkbox. Now you may perform a find to find all checkboxes of this sub-tree so you may check or uncheck them:

myTarget.closest('li').find('custom-selection') ....there you have all descendant checkboxes that you may chech or uncheck, to make they have the same statuts of the father checkbox.