OnExpand - High Contrast Mode

[César]

Hi,

I need to make this control to be accessibility compliant. I have already patched it for aria-markup, but when I turn on high contrast mode, the images for collapsing/expanding the control and the nodes, just disappear.

I have placed a span with "+" and "-" symbols just before the "rtSp" span. But now the problem is that I need to keep them synchronized with the status of the node (expanded or collapsed).

I am trying to avoid to manually place events in all of the objects that can originate an expand/collapse operation.

Do you have a client event for expand or collapse that I can use to update the status of the node?

Thanks

[Princy]

Hi César,

Please try the following JavaScript to achieve your scenario.

JavaScript:

<script src="../JS/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('.rtPlus').click(function () {
        alert("Fired");
        //your code
    });
</script>

Thanks,
Princy.

[César]

Hi Princy,

Thanks a lot for your response. Yesterday I was able to patch the control already. I was missing some "onExpanded" event that avoided me to to do the following, as in your code there are a few missing scenarios:

The click event has to be managed in rtPlus and rtMinus spans, to update the expanded status.

The double click event needs to be managed in the rtIn span, as the tree can be expanded/collapsed by double clicking the text of a node.

Also the key press needs to be managed in order to update the status when the user user the keyboard (arrows) to expand or collapse the nodes.


Regards

[Princy]

Hi César,

By default the Click event of  'rtPlus' will expand/collapse node based on the status. Please have a look into the following code snippet to expand/collapse the nodes based on the status of RadDropDownTree on DoubleClick and KeyDown event of 'rtPlus'.

JavaScript:

$('.rtPlus').dblclick(function (e) {
    var dropdown = $find("<%=RadDropDownTree1.ClientID %>");
    var item = e.currentTarget.parentElement.innerText;
    if (dropdown.get_embeddedTree().findNodeByText(item).get_expanded() == false) {
        dropdown.get_embeddedTree().findNodeByText(item).set_expanded(true);
    }
    else {
        dropdown.get_embeddedTree().findNodeByText(item).set_expanded(false);
    }
});
$('.rtPlus').keydown(function (e) {
    var dropdown = $find("<%=RadDropDownTree1.ClientID %>");
    var item = e.currentTarget.parentElement.innerText;
    if (e.keyCode == 38) {
        if (dropdown.get_embeddedTree().findNodeByText(item).get_expanded() == true) {
            dropdown.get_embeddedTree().findNodeByText(item).set_expanded(false);
        }
    }
    else if (e.keyCode == 40) {
        if (dropdown.get_embeddedTree().findNodeByText(item).get_expanded() == false) {
            dropdown.get_embeddedTree().findNodeByText(item).set_expanded(true);
        }
    }
});

Thanks,
Princy,