CODEWITHSUNDEEP
c#javascriptasp.netcheckboxtreeview
zukanta
zukanta

Reputation: 2683

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 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):

enter image description here

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!

Upvotes: 3

Views: 10032

Answers (4)

Resource
Resource

Reputation: 544

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>

Upvotes: 0

stygian_pit
stygian_pit

Reputation: 11

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.

Upvotes: 1

zukanta
zukanta

Reputation: 2683

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];
}

Upvotes: 4

DaveB
DaveB

Reputation: 9530

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

Upvotes: 0

Related Questions