This is a migrated thread and some comments may be shown as answers.

OnExpand - High Contrast Mode

3 Answers 78 Views
DropDownTree
This is a migrated thread and some comments may be shown as answers.
César
Top achievements
Rank 1
César asked on 11 Dec 2013, 10:53 AM
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


3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 12 Dec 2013, 04:49 AM
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.

0
César
Top achievements
Rank 1
answered on 12 Dec 2013, 09:06 AM
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


0
Princy
Top achievements
Rank 2
answered on 16 Dec 2013, 07:55 AM
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,
Tags
DropDownTree
Asked by
César
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
César
Top achievements
Rank 1
Share this question
or