Different behavior for mouse click and key press?

[Software]

I've got an app that uses the panelbar to display different grids of data.  Some of our users like to use keyboard shortcuts to expand and collapse the panel items.  So I created a small Javascript function attached to the OnClientItemFocus to accomplish this:

function focusItem(panelbar, args) {
    var item = args.get_item();
    if (item.get_level() == 0) {
//        item.click();
        if(item.get_expanded()) item.collapse();
        else item.expand();
    }
}

Here's the problem - a mouseclick also focuses on the item, but has it's own event that expands or collapses the panel item.  So what I get when I click it with a mouse is, it expands just fine, but when I click again to collapse it collapses and expands again.  I've tried  using the "stopProgagation" method on the domEvent in the ItemClicked and ItemClicking client-side events, but that doesn't help.  What I think I need is a way to differentiate between a mouseclick and key press in the client-side event so I can handle them differently.  Unless there's an easier way?

All I really want to do its allow users to expand or collapse panelbar items when they click on them, or if they use a keyboard shortcut to select them.  Is that possible with RadPanelBar?

Thanks for the help!

[Veselin Vasilev]

Hi Eddie,

I could not reproduce the problem using this code:

<div>
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Vista" OnClientItemFocus="focusItem" >
        <Items>
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                        <Items>
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>
</div>
<script type="text/javascript">
function focusItem(panelbar, args) {
    var item = args.get_item();
    if (item.get_level() == 0) {
        if(item.get_expanded()) item.collapse();
        else item.expand();
    }
}
</script>

When I expand the first root node with a mouse and then collapse it with the mouse - it collapses just fine. What might be different in your case?


All the best,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.