OnExpand - High Contrast Mode

4 posts, 0 answers
  1. César
    César avatar
    14 posts
    Member since:
    Sep 2013

    Posted 11 Dec 2013 Link to this post

    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


  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Dec 2013 Link to this post

    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.

  5. César
    César avatar
    14 posts
    Member since:
    Sep 2013

    Posted 12 Dec 2013 Link to this post

    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


  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Dec 2013 Link to this post

    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,
  8.
Back to Top