Telerik RadTreeView OnClientNodeChecked Compatibility issue with IE9+

Question

I have a RadTreeView with dynamic levels and checkable nodes based on conditions. Some levels may have no checkable nodes, some checkable nodes or all checkable nodes.

I use the OnClientNodeChecked event to keep the ID of the checked nodes in a hidden field for later use and to update a checked node counter.

This event is fired everytime the user clicks on a checkbox next to a node. Now, if the user shift + click on a checkbox, then all the checkable child node should be checked/unchecked.

Here is the treeview control:

<telerik:RadTreeView RenderMode="Lightweight" runat="Server" ID="treeAccounts" EnableDragAndDrop="false" EnableDragAndDropBetweenNodes="false" Skin="Vista" CheckBoxes="True"
                OnClientLoad="initializeSelectedNodes" OnClientNodeChecked="treeNodeChecked">
            </telerik:RadTreeView>

And here is the javascript function: (treeNodeChecked is called in the OnClientNodeChecked)

var tree;

function treeNodeChecked(sender, eventArgs) {

    tree = $find("<%= treeAccounts.ClientID %>");
    var node = eventArgs.get_node();

    //Here I save the ID of the checked node
    updateSelectedNodes(node);

    if (eventArgs._domEvent.shiftKey || event.shiftKey) {

        var children = node.get_allNodes();
        var checkedState = node.get_checked();

        //If the checked node had children and the shift key was pressed 
        //when the checkbox was clicked then I check/uncheck its child 
        //nodes.
        for(m in children) 
        { 
            var child = children[m];
            child.set_checked(checkedState);

            //Here I save the ID of the child nodes
            updateSelectedNodes(child);
        }
    }
}

This works perfectly in Chrome, Firefox and IE8-, but it doesn´t work in IE9+. The problem is that in IE9+ both eventArgs._domEvent.shiftKey and event.shiftKey are undefined .

I also tried checking for event.keyCode or event.which but since the event is NOT a keypress or keydown , they are undefined as well.

Any ideas on how can I make this work in IE9+? Thanks in advance.

Answer 1

After digging everywhere, I found a way around.

I added this code:

var shiftKeyPressed;

document.addEventListener("keydown", keyDownEvent, false);

function keyDownEvent(e) {
    var keyCode = e.keyCode;
    if(keyCode==16) {
        shiftKeyPressed = true;
    } 
}

document.addEventListener("keyup", keyUpEvent, false);

function keyUpEvent(e) {
    var keyCode = e.keyCode;
    if(keyCode==16) {
        shiftKeyPressed = false;
    } 
}

And then when I check if the shift key is pressed I added the new variable:

if (eventArgs._domEvent.shiftKey || event.shiftKey || shiftKeyPressed){...}

Now it's working in every browser.