禁用ASP.net树视图复选框

Question

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 checkbox in a permissions treeview.

Here's what i'm looking for, this is the equivaqlent in a winform app (the checkboxes are disabled where the text is grayed out):

I saw other solutions where the click event on the checkboxes is intercepted and ignored. I would prefer a solution where the checkboxes are simply set to disabled.

I'm looking for a C# solution but will be happy with a C#/Javascript solution.

Thanks!

Answer 1

Ok, found a fairly clean solution to this:

in code-behind:

TreeNode newNode = new TreeNode(permission.ToString());
newNode.SelectAction = TreeNodeSelectAction.None; // no Link

    if (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 treeView
    function DisableCheckBoxes(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;
            }
        }
    }

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

    return nodeSpan[0];
}

Answer 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;

ie 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.

Answer 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

Answer 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.

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