PanelBar and Focus

[Velma]

<script type="text/javascript">
    function focusItem(panelbar, args) {
        var item = args.get_item();
        if (item.get_level() == 0)
            item.focusFirstChild();
    }
 </script>

    <telerik:RadPanelBar ID="PostsRadPanelBar" runat="server" Skin="Web20"
        Font-Size="16px"  onclientitemfocus="focusItem"
        ExpandMode="SingleExpandedItem" >
        <Items>
            <telerik:RadPanelItem Text="Office" Expanded="True">
                <Items>
                    <telerik:RadPanelItem Text="Office Detail">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Addresses">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Communications">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Site Specifics">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>


            <telerik:RadPanelItem Text="Positions">
                <Items>
                    <telerik:RadPanelItem Text="Position Detail">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Assignment Detail (FSO)">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>


            <telerik:RadPanelItem Text="Products & Services">
                <Items>
                    <telerik:RadPanelItem Text="Products & Services Information">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>


            <telerik:RadPanelItem Text="Residences">
                <Items>
                    <telerik:RadPanelItem Text="Residence Information">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>


            <telerik:RadPanelItem Text="Vehicles">
                <Items>
                    <telerik:RadPanelItem Text="Vehicle Detail">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Purchase & Disposition">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>


            <telerik:RadPanelItem Text="Security">
                <Items>
                    <telerik:RadPanelItem Text="Security Information">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

I am implementing my first panelbar, simple with two levels only, at least so far. My goal is that:
(a) Page loads with the first top level item open and other items closed. (works)
(b) Page loads with the first second level item under the first top level item with focus. (doesn't work)
(c) When a second-level item is selected (including at load) Javascript is called in which I can implement an action (haven't worked on this yet)
(d) When a top level item is selected/expanded, the first second level item under that item is focused/selected (that is, I want it to highlight and also to implement an action). (this doesn't work, and is where I am mainly stuck now).

I have tried to implement the focus/highlight part of (d) through a code sample I found in the Telerik documentation using the onclientitemfocus event, and I get the following error:

htmlfile:  Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept focus.

I get this same error if I move the JS to onclientitemexpand event handler. And I get it if I set the panel bar so all the top level items are expanded.

What am I doing wrong? I have attached my code sample.

(Also, since some kind person who knows how this works is probably going to look at this, what do I need to do to get the font-size setting to make any difference? It looks like the font-size setting is ignored. Do I actually have to modify some skin class?)

Thank you very much.

[Bozhidar]

Hello Velma,

Here's what you should do:

(b) - Because you set the first item expanded property to true in the markup, no event for this is fired. In order to focus the first child of that item, you have to do it in the OnClientLoad event like so:

function focusInitialItem(sender) {
   var panelBar = sender;
   panelBar.get_items().getItem(0).get_items().getItem(0).focus();
}

(c) - Set the following function to the OnClientItemClicked event:

function itemClicked(sender, args) {
   var item = args.get_item();
   if(item.get_level() == 1){
      //do action
      alert(item.get_text());
   }
}

(d) - Put the following code in the OnClientItemExpand event:

setTimeout(function () { args.get_item().get_items().getItem(0).focus(); }, 0);

And here's a little workaround you can use to get the Font-Size property to work properly. Just add these CSS rules:

/** child items */
html .RadPanelBar .rpGroup .rpLink,
html .RadPanelBar .rpGroup .rpTemplate
{
    font-size: 1em;
}
/** root items items */
html .RadPanelBar_Default a.rpLink,
html .RadPanelBar_Default div.rpHeaderTemplate,
html .RadPanelBar_Default .rpTemplate
{
    font-size: 1em;
}

Regards,
Bozhidar
the Telerik team

[Velma]

Thank you. I implemented this, and everything works great except the two focus functions. They do hit, they don't error, but they don't focus. Can you see what I am doing wrong? I made a separate project without all the extraneous so I could paste in the whole page, below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadPanel.aspx.cs" Inherits="RadPanelTest.RadPanel" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        html .RadPanelBar .rpGroup .rpLink,
        html .RadPanelBar .rpGroup .rpTemplate
        {
            font-size: 16px;
        }
        /** root items items */
        html .RadPanelBar_Web20 a.rpLink,
        html .RadPanelBar_Web20 div.rpHeaderTemplate,
        html .RadPanelBar_Web20 .rpTemplate
        {
            font-size: 16px;
        }
    </style>

    <script type="text/javascript">
        function onClientLoad(panelBar) {
            // focus initial item
            var item = panelBar.get_items().getItem(0).get_items().getItem(0);
            item.focus();
        }

        function onClientItemClicked(panelBar, args) {
            var item = args.get_item();
            if (item.get_level() == 1) {
                //do action
                alert(item.get_text());
            }
        }

        function onClientItemExpand(panelBar, args) {
            setTimeout(function () { args.get_item().get_items().getItem(0).focus(); }, 0);
        }

    </script>

</head>
<body>
    <form id="form1" runat="server"><div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadPanelBar ID="PostsRadPanelBar" runat="server"
            ExpandMode="SingleExpandedItem" Skin="Web20"
            OnClientLoad="onClientLoad"
            OnClientItemClicked="onClientItemClicked"
            OnClientItemExpand="onClientItemExpand">
            <Items>
                <telerik:RadPanelItem Text="Office" Expanded="True">
                    <Items>
                        <telerik:RadPanelItem Text="Office Detail">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Addresses">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Communications">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Site Specifics">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

                <telerik:RadPanelItem Text="Positions">
                    <Items>
                        <telerik:RadPanelItem Text="Position Detail">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Assignment Detail (FSO)">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

                <telerik:RadPanelItem Text="Products & Services">
                    <Items>
                        <telerik:RadPanelItem Text="Products & Services Information">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

                <telerik:RadPanelItem Text="Residences">
                    <Items>
                        <telerik:RadPanelItem Text="Residence Information">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

                <telerik:RadPanelItem Text="Vehicles">
                    <Items>
                        <telerik:RadPanelItem Text="Vehicle Detail">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem Text="Purchase & Disposition">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>

                <telerik:RadPanelItem Text="Security">
                    <Items>
                        <telerik:RadPanelItem Text="Security Information">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div></form>
</body>
</html>

[Bozhidar]

Hi Velma,

I tested your page and it works on every browser, except IE. That's because there is a known issue with IE and the focus() function. Here are the modified javascript functions, which make the page work on IE as well:

<script type="text/javascript">

    var firstChild;

    function onClientLoad(panelBar) {
        var item = panelBar.get_items().getItem(0).get_items().getItem(0);
        setTimeout(function () { item.focus(); }, 1);

    }

    function onClientItemClicked(panelBar, args) {
        var item = args.get_item();
        if (item.get_level() == 1) {
            alert(item.get_text());
        }
    }

    function onClientItemExpand(panelBar, args) {
        firstChild = args.get_item().get_items().getItem(0);
    }

    function OnClientItemAnimationEnd(sender, args) {
        firstChild.focus();
    }

</script>

Kind regards,
Bozhidar
the Telerik team

[Velma]

Thank you. Unfortunately, I implemented these changes and it still doesn't work for me--neither focus works. It doesn't work at work on XP SP3 with IE8 or Chrome (our users are all in IE8 and IE7). So I took it home, and it doesn't work on Win7 with IE9 and Firefox. Either I've totally messed up, which is not apparent to me (the events are all hitting at the appropriate times), or something else is different... Could we be using different versions of the product with different behaviors?I have Telerik.Web.UI.dll version 2011.3.1115.40. I will try submitting a support ticket with my whole little demo project attached.

[Bozhidar]

Hello Velma,

Yes, that would be very helpful. 

Best wishes,
Bozhidar
the Telerik team