This is a migrated thread and some comments may be shown as answers.

RadCombobox On Tab click...focus to next control not working

17 Answers 526 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Jinisha
Top achievements
Rank 1
Jinisha asked on 17 Jan 2013, 05:14 PM
<telerik:RadComboBox Visible="false" TabIndex="4" Skin="Vista" ID="rcbBarNumber" Runat="server" Width="200px" HighlightTemplatedItems="true" ShowToggleImage="false" EnableOverlay="true" ShowDropDownOnTextboxClick="false" DropDownWidth="350px" MaxLength="20" CausesValidation="false"  AllowCustomText="true" EnableLoadOnDemand="true" ShowWhileLoading="true" EnableScreenBoundaryDetection="false" ExpandDirection="Up" EnableVirtualScrolling="true" ShowMoreResultsBox="true" AutoPostBack="True" OnClientItemsRequested="OnClientItemsRequested" OnClientDropDownOpening="OnClientDropDownOpening" OnItemsRequested="rcbBarNumber_ItemsRequested" OnSelectedIndexChanged="rcbBarNumber_SelectedIndexChanged"  ItemsPerRequest="10" CollapseAnimation-Type="None" MinFilterLength="0">
</telerik:RadComboBox>    
 
<asp:TextBox ID="tbFirmName" ToolTip="Enter Firm Name" runat="server" TabIndex="5" Width="250" MaxLength="70" />
 
<telerik:RadComboBox Visible="false" TabIndex="7" Filter="StartsWith" Skin="Vista" ID="rcbFirstName" runat="server"
AllowCustomText="true" Width="200px" HighlightTemplatedItems="true" ShowToggleImage="false" EnableOverlay="true" ShowDropDownOnTextboxClick="false" DropDownWidth="350px" MaxLength="20" CausesValidation="false" EnableLoadOnDemand="true" ShowWhileLoading="true" EnableScreenBoundaryDetection="false" ExpandDirection="Up" EnableVirtualScrolling="true" ShowMoreResultsBox="true"
AutoPostBack="True" OnClientItemsRequested="OnClientItemsRequested" OnClientDropDownOpening="OnClientDropDownOpening" OnItemsRequested="rcbFirstName_ItemsRequested" OnSelectedIndexChanged="rcbBarNumber_SelectedIndexChanged" ItemsPerRequest="10" CollapseAnimation-Type="None" MinFilterLength="0">                                                           
</telerik:RadComboBox>
                                                        <asp:TextBox ID="tbMiddleName" ToolTip="Enter Middle Name" Width="200px" TabIndex="8" runat="server" MaxLength="20" />
                                                        <asp:TextBox ID="tbLastName" ToolTip="Enter Last Name" Width="200px" TabIndex="9" runat="server" MaxLength="70" />                                                       
                                                        <telerik:RadComboBox Visible="false" Skin="Vista" TabIndex="10" ID="rcbLastName" runat="server"  AllowCustomText="true" Width="200px" Filter="StartsWith" ShowWhileLoading="false" HighlightTemplatedItems="true" ShowToggleImage="false" EnableOverlay="true" ShowDropDownOnTextboxClick="false" DropDownWidth="350px" MaxLength="20" CausesValidation="false"  EnableLoadOnDemand="true" EnableScreenBoundaryDetection="false" ExpandDirection="Up" EnableVirtualScrolling="true" ShowMoreResultsBox="true"
 AutoPostBack="True" OnClientItemsRequested="OnClientItemsRequested" OnClientDropDownOpening="OnClientDropDownOpening" OnItemsRequested="rcbLastName_ItemsRequested" OnSelectedIndexChanged="rcbBarNumber_SelectedIndexChanged"  ItemsPerRequest="10" CollapseAnimation-Type="None" MinFilterLength="0">                                                                                                                          
</telerik:RadComboBox>
                                                        <telerik:RadComboBox ID="rcbSuffix" ToolTip="Enter or Select Suffix" runat="server" TabIndex="12" Skin="Vista" AllowCustomText="true" MaxLength="5" CausesValidation="false"
                                                            EnableLoadOnDemand="true" EnableVirtualScrolling="true"
                                                            DropDownWidth="50" Width="50" />

17 Answers, 1 is accepted

Sort by
0
Jinisha
Top achievements
Rank 1
answered on 17 Jan 2013, 05:16 PM
Here is the javascript I am using
 
function OnClientItemsRequested(sender, eventArgs) {
    if (sender.get_items().get_count() > 0 && !sender.get_dropDownVisible()) {
        sender.showDropDown();
    }
    else if (sender.get_items().get_count() == 0) {
        sender.hideDropDown();
    }
}
function OnClientDropDownOpening(sender, eventArgs) {
    if (sender.get_items().get_count() == 0)
        eventArgs.set_cancel(true);   
}
0
Jinisha
Top achievements
Rank 1
answered on 17 Jan 2013, 05:25 PM
When I type in a bar number, first name or last name and click tab..the focus moves to address bar instead of the next control Firm Name, middle name and Suffix respectively.
0
Jinisha
Top achievements
Rank 1
answered on 17 Jan 2013, 08:43 PM
I made sure to use for ex; tbMiddleName.Focus() in the rcbFirstName_SelectedIndexChanged event. I have tried setting the focus on client side too in the OnClientBlur event using $get("<%=tbMiddleName.ClientID%>").focus() but even that didn't work. Please advice!
0
Jinisha
Top achievements
Rank 1
answered on 17 Jan 2013, 09:36 PM
I just updated from version 2012.2.815.40 to 2012.2.912.40 but still running into the same issue.
0
Hristo Valyavicharski
Telerik team
answered on 22 Jan 2013, 03:25 PM
Hi Jinisha,

Some of your elements are invisible depending on data. Also when Load On Demand is enabled the combo makes ajax calls and it is possible to lose  focus. Try to set the focus of FirmName using RadScriptManager1.SetFocus("tbFirmName"); You can do that after the selection in the LastName combobox is performed, for example in the SelectedIndexChanged event handler :

protected void rcbLastName_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
   {
       RadScriptManager1.SetFocus("tbFirmName");
   }

More information about SetFocus() can be found here

Regards,
Hristo Valyavicharski
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Jinisha
Top achievements
Rank 1
answered on 22 Jan 2013, 09:36 PM
I removed the tabindex and now its working fine. Thanks for your suggestion.
0
Tim
Top achievements
Rank 1
answered on 12 Mar 2013, 08:10 AM
We are facing the same "loosing focus" issue, and SetFocus() could be a workaround if one knew which is the next control in tab order. However, we are using generated forms and it is next to impossible to find out which control the browser would normally give focus to (it must be a visible, focusable input element, the position in html may not be the position in the browser display etc.)

In our scenario, the issue usually appears when the control uses "AutoPostback" - which is not a specific Telerik issue (although it would be nive, if they could provide a universal workaround). That the controls also loose focus when they fetch data via ajax is strange.

On page level I think that I could hook into ASP.NET Ajax and set the focus to the correct control. However, I am looking for a fix that I can implement into a control derived from RadComboBox and I am lost.
0
Tim
Top achievements
Rank 1
answered on 12 Mar 2013, 10:45 AM
The only workaround that I could find is adding a property "ControlIdToTabOnSelectedIndexChange" to a derived class of RadComboBox and locate that control OnSelectedIndexChanged and set the focus to it. For our scenario with generated forms this is not a satisfying solution since the generation process has to be reworked. In other scenarios one does not want to manage those Ids when removing a control etc. But I failed to locate the next control in tab order and I also could not get a JQuery trigger to work that would send a Tab-Key event.
0
Hristo Valyavicharski
Telerik team
answered on 15 Mar 2013, 08:39 AM
Hi Tim,

Could you open a new support ticket and attach a sample project, so we could inspect it locally and provide you with the proper solution?

Regards,
Hristo Valyavicharski
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tim
Top achievements
Rank 1
answered on 15 Mar 2013, 09:07 AM
I have seen support asking for working samples many times in this forum. I understand tat it is hard to spot a problem by description, but on the other hand it is also a lot of work (and sometimes impossible without disclosing code that I cannot disclose because it is owned by the principal) to provide a "working example".

However, in this case I think the issue is not a Telerik issue, it is just an issue of AutoPostBack and IE.If you select an item in a combobox selection list and hit the tab key on the item to select it and step out of the control, the control fires a postback (because the selected index changed). This will alter the focus position and it is tough to then refocus on the next field in tabindex unless the ID of this next control is known.
0
Shivendu
Top achievements
Rank 1
answered on 05 Aug 2014, 11:02 AM
I have made UserControl and taken the 4 RadComboBox .Each property Autopostback is True.

I did not get the focus on next control after page postback.
0
Shinu
Top achievements
Rank 2
answered on 05 Aug 2014, 12:25 PM
Hi Shivendu,

Please try to attach the OnSelectedIndexChanged event for RadComboBox and there you can set the focus of next RadComboBox as follows.

C#:
protected void RadComboBox1_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
{
    //SelectedIndexChanged event of first RadComboBox
    RadComboBox2.Focus();//setting next RadComboBox focus
}

Thanks,
Shinu.
0
Shivendu
Top achievements
Rank 1
answered on 05 Aug 2014, 01:14 PM
Is Not work.


After page reload, pressing the Tab (Key) .Then focus on address bar of URL.
0
Shinu
Top achievements
Rank 2
answered on 06 Aug 2014, 04:00 AM
Hi Shivendu,

Please try the below JavaScript code snippet to achieve your scenario.

JavaScript:
function pageLoad() {
    var allRadControls = $telerik.radControls;
    var index, comboElement;
    for (index = 0; index < allRadControls.length; index++) {
        comboElement = allRadControls[index];
        if (Telerik.Web.UI.RadComboBox && comboElement instanceof Telerik.Web.UI.RadComboBox) {
            if (comboElement.get_text() == "") {
                comboElement.get_inputDomElement().focus();
                break;
            }
        }
    }
}

Please elaborate your requirement if it doesn't help.
Thanks,
Shinu.
0
Shivendu
Top achievements
Rank 1
answered on 06 Aug 2014, 06:51 AM
Where did I call this method in page level or usercontrol level and which control event ?
0
Shivendu
Top achievements
Rank 1
answered on 06 Aug 2014, 10:45 AM
I call javascript on page load event by different type like:

Page.ClientScript.RegisterClientScriptBlock(typeof(ScriptManager), "CallMyMethod", "pageLoad();");

Or

ScriptManager.RegisterStartupScript(this, this.GetType(), "KeyClient", "<script>return pageLoad();</Script>", false);

OR
window.onload = function pageLoad() {
               pageLoad();
           };


But It is not work.Please guide me . 
0
Shinu
Top achievements
Rank 2
answered on 06 Aug 2014, 11:28 AM
Hi Shivendu,

Please try to call the pageLoad event in the ASPX page itself. Please take a look into my ASPX page.

ASPX:
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function pageLoad() {
            var allRadControls = $telerik.radControls;
            var index, comboElement;
            for (index = 0; index < allRadControls.length; index++) {
                comboElement = allRadControls[index];
                if (Telerik.Web.UI.RadComboBox && comboElement instanceof Telerik.Web.UI.RadComboBox) {
                    if (comboElement.get_text() == "") {
                        comboElement.get_inputDomElement().focus();
                        break;
                    }
                }
            }
        }
    </script>
</telerik:RadCodeBlock>

Thanks,
Shinu.
Tags
ComboBox
Asked by
Jinisha
Top achievements
Rank 1
Answers by
Jinisha
Top achievements
Rank 1
Hristo Valyavicharski
Telerik team
Tim
Top achievements
Rank 1
Shivendu
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or