RadAjaxPanel focus and event handling

[golddog]

A couple of things I've been trying to figure out without luck are setting focus within a RadAjaxPanel and handling an 'enter' key.

Within a search control, we have a RadAjaxPanel (mark-up below).

First, I can't figure out how to set focus on the rcbPayPeriod control.  I tried simply using rcbPayPeriod.Focus() in the PreRender event handler without luck.  The focus seems like it always resets to the upper-left of the entire page (our master page has a nav bar above this control).  This seems to be true regardless of whether it's an initial hit to the page or a postback.

Second, we'd like to let the enter key invoke the btnSearch click event when it's done doing the ajax postback.  (i.e., make that the default button).  Unfortunately, we do ajax postbacks both for enter keys in the RadDatePicker (which is what raises the SelectedDateChanged
event) and the RadComboBox (when they change the selected index).

(In case anyone's interested, as those dates change, we go look up valid information for the RadComboBoxes further down the page and populate them on these postbacks).

So, it's important to know the difference between enter hit and selected index changed, even if there is a way to hook into that ajax postback.  Does anyone know if we can and recognize that the enter key was hit, then set off the search button's click event?

--------------

<%

@ Register TagPrefix="radC" Namespace="Telerik.WebControls" Assembly="RadCalendar.Net2" %>

<%

@ Register TagPrefix="radCB" Namespace="Telerik.WebControls" Assembly="RadComboBox.Net2" %>

<%

@ Register TagPrefix="radA" Namespace="Telerik.WebControls" Assembly="RadAjax.Net2" %>

<

div>

    <radA:RadAjaxPanel ID="radAjaxPanel" runat="server"
         LoadingPanelID="ajaxLoadingPanel">

    <div id="divSearchPeriod" runat="server" style="float: left;">

        <asp:Label ID="lblByPayPeriod" runat="server" Font-Bold="true"
             Font-Size="Medium" Text="Search by Pay Period:"></asp:Label>

        <br />

        <asp:Label ID="lblPayPeriod" runat="server" Text="Pay Period:" 
            Width="75 px"></asp:Label>

        <radCB:RadComboBox ID="rcbPayPeriod" runat="server" AutoPostBack="true" 
                MarkFirstMatch="true"
                OnSelectedIndexChanged="rcbPayPeriod_SelectedIndexChanged">
        </radCB:RadComboBox>

        <br />

        <asp:Label ID="lblYear" runat="server" Text="Year:" Width="75 px"></asp:Label>

        <radCB:RadComboBox ID="rcbYear" runat="server" AutoPostBack="true" 
                MarkFirstMatch="true"
                OnSelectedIndexChanged="rcbYear_SelectedIndexChanged">
        </radCB:RadComboBox>

    </div>

    <div style="float: left; width: 343px;">

        <asp:Label ID="lblByDates" runat="server" Font-Bold="true" Font-Size="Medium" 
                Text="Search by Dates:"></asp:Label>

        <br />

        <asp:Label ID="lblStart" runat="server" Text="Start Date:" Width="70 px">
        </asp:Label>

        <radC:RadDatePicker ID="rcStart" runat="server" AutoPostBack="true" 
                EnableMultiSelect="false"
                OnSelectedDateChanged="rcStart_SelectionChanged">
        </radC:RadDatePicker>

        <br />

        <div style="float: right;"></div>

        <asp:Label ID="lblEnd" runat="server" Width="70 px" 
            Text="End Date:"></asp:Label>

        <radC:RadDatePicker ID="rcEnd" runat="server" AutoPostBack="true" 
                EnableMultiSelect="false"
                OnSelectedDateChanged="rcEnd_SelectionChanged">
        </radC:RadDatePicker>

    </div>

    <div>

        <br />
        <br />
        <br />
        <br />
        <br />

        <asp:Panel ID="pnlUser" runat="server">

            <asp:Label ID="lblUserName" runat="server" Text="User Name:" 
                Width="110px"></asp:Label>

            <radCB:RadComboBox ID="rcUser" runat="server" MarkFirstMatch="true">
            </radCB:RadComboBox>

            <asp:Label ID="lblNoUsers" runat="server" 
                    Text="No User Records in Selected Criteria" Visible="false" />
        </asp:Panel>

        <asp:Panel ID="pnlClient" runat="server">
                <asp:Label ID="lblClientName" runat="server" Text="Client Name:" 
                        Width="110px"></asp:Label>

                <radCB:RadComboBox ID="rcClient" runat="server" MarkFirstMatch="true">
                </radCB:RadComboBox>

                <asp:Label ID="lblNoClients" runat="server" 
                        Text="No Client Records in Selected Criteria" Visible="false" />

        </asp:Panel>

        <asp:Panel ID="pnlProject" runat="server">

            <asp:Label ID="lblProjectName" runat="server" Text="Project Name:" 
                Width="110px"></asp:Label>

            <radCB:RadComboBox ID="rcProject" runat="server" MarkFirstMatch="true">
            </radCB:RadComboBox>

            <asp:Label ID="lblNoProjects" runat="server" 
                    Text="No Project Records in Selected Criteria"
                    Visible="false" />

        </asp:Panel>

        <asp:Panel ID="pnlUserRole" runat="server">

            <asp:Label ID="lblUserRole" runat="server" Text="User Role:" Width="110px" />

            <radCB:RadComboBox ID="rcUserRole" runat="server" MarkFirstMatch="true" />

        </asp:Panel>

    </div>

    </radA:RadAjaxPanel>

    <radA:AjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Transparency="25" 
            BackColor="window">

        <asp:Image ID="imgLoading" runat="server" ImageUrl="~/Loading.gif" 
            AlternateText="Loading..." />

    </radA:AjaxLoadingPanel>

</

div>

<

div>

    <br />

    <asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click" 
        Text="Search" />

</

div>

<

hr />

<

div>

    <asp:Label ID="lblSearchValue" runat="server"></asp:Label>

</

div>

[Maria Ilieva]

Hello,

If you need to set focus on a particular control after each Ajax request you could use RadAjaxpanel.FocusControl(...) method. Regarding the recognizing of the enter key pressing you could review the following forum post which elaborates on this matter.

Kind regards,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[golddog]

Only marginal luck on the focus control.  I added the following as the last line of my PreRender event handler for the control:

radAjaxPanel.FocusControl(rcbPayPeriod);

If I use one of the labels, focus is set to that control.  However, trying the comboboxes or datepickers fails to set the focus as I expected.  So, that tells me there's not something else later stealing focus, but that those types of controls don't accept focus.

Hitting the tab key after trying to set control as above pushes focus from (presumably) the url to the first nav link at the top of the page.  Hitting tab after setting focus to a label pushes focus to whatever control is "behind" that label.

I'll try to work on the other forum post to figure out how to handle the return key bit.

[golddog]

P.S. I thought to try a "plain" asp control within my RadAjaxPanel.

In a couple of tests, I threw a DropDownList and TextBox in there, and used the FocusControl method.  They worked great as well.

So, it seems like it's something about the RadComboBox and RadDatePicker, or the way I've configured them or something.

[golddog]

I'm going to start a new thread to discuss the enter key issue, to make it easier to follow.  I never should've mixed the two in the first place.

Sorry about that.  Thanks for working with me.