Disabling Asp.net Treeview Checkboxes

How would you guys conditionally disable checkboxes in an asp treeview? For instance, if an application user does not have a certain permission, disable that permission entry check

Solution 1:

Ok, found a fairly clean solution to this:

in code-behind:

TreeNodenewNode=newTreeNode(permission.ToString());
newNode.SelectAction = TreeNodeSelectAction.None; // no Linkif (shouldDisableCheckbox)
    {
        // Set a class so disabled nodes can be formatted thru CSS// and be identifiable as disabled in Javascript.
        newNode.Text = "<span class=disabledTreeviewNode>" + newNode.Text +"</span>";
    }

nodes.Add (newNode);

in Javascript, scan all treeview nodes for those that have that className and disable the checkboxes associated to them:

// Called via a startup script created in Code Behind.// Disables all treeview checkboxes that have a text with a class=disabledTreeviewNode.// treeviewID is the ClientID of the treeViewfunctionDisableCheckBoxes(treeviewID)
    {
        TREEVIEW_ID = treeviewID;

        var treeView = document.getElementById(TREEVIEW_ID);

        if (treeView)
        {
            var childCheckBoxes = treeView.getElementsByTagName("input");
            for (var i = 0; i < childCheckBoxes.length; i++)
            {
                var textSpan = GetCheckBoxTextSpan(childCheckBoxes[i]);

                if (textSpan.firstChild)
                    if (textSpan.firstChild.className == "disabledTreeviewNode")
                        childCheckBoxes[i].disabled = true;
            }
        }
    }

functionGetCheckBoxTextSpan(checkBox)
{
    // Set label text to node namevar parentDiv = checkBox.parentNode;
    var nodeSpan = parentDiv.getElementsByTagName("span");

    return nodeSpan[0];
}

Solution 2:

Sadly, I don't have enough reputation to be able to comment directly on zukanta's answer which is a bit of a pain, but I had to make a modification in the javascript to make this work:

if (textSpan.firstChild)
                if (textSpan.className == "disabledTreeviewNode")
                    childCheckBoxes[i].disabled = true;

i.e. replace textSpan.firstChild.ClassName with textSpan.ClassName

Also worth pointing out that the JavaScript will error out unless all of your tree nodes in the treeview that you are addressing have a

<span></span> 

in them. You get a null reference at

if (textSpan.firstChild) 

and no subsequent nodes are processed.

I got around this point by adding a span with class=enabledTreeviewNode to all tree nodes that I didn't want disabled.

You could also handle the exception in the JavaScript, I guess.

Hope this helps someone who stumbles across this (otherwise excellent) solution later on.

Solution 3:

You could use security trimming to not show items that the user doesn't have access to. I don't know of any way to have the items displayed but not active. Disabling checkboxes on the client side only could create a security hole.

Walkthrough: Filtering Site-Map Nodes Based on Security Roles

ASP.NET Site-Map Security Trimming

Solution 4:

The OP was looking for conditional disable but I just want to use the TreeView to display historical audit data, logs of when items were switched on. All the checkboxes on my page should be disabled. It took me some time to find this elegant jQuery solution. I hope it helps anyone with a similar issue.

Add the code below to your script section. As all input boxes will be disabled, there's no need to make any changes at all to your codebehind.

<scripttype="text/javascript">
    $(document).ready(function () {
        $("input:checkbox").each(function () {
            $(this).prop('disabled', true);
        });
    });
</script>