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

18 posts, 0 answers
  1. Jinisha
    Jinisha avatar
    33 posts
    Member since:
    Oct 2012

    Posted 17 Jan 2013 Link to this post

    <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" />
  2. Jinisha
    Jinisha avatar
    33 posts
    Member since:
    Oct 2012

    Posted 17 Jan 2013 Link to this post

    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);   
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jinisha
    Jinisha avatar
    33 posts
    Member since:
    Oct 2012

    Posted 17 Jan 2013 Link to this post

    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.
  5. Jinisha
    Jinisha avatar
    33 posts
    Member since:
    Oct 2012

    Posted 17 Jan 2013 Link to this post

    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!
  6. Jinisha
    Jinisha avatar
    33 posts
    Member since:
    Oct 2012

    Posted 17 Jan 2013 Link to this post

    I just updated from version 2012.2.815.40 to 2012.2.912.40 but still running into the same issue.
  7. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 22 Jan 2013 Link to this post

    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.
  8. Jinisha
    Jinisha avatar
    33 posts
    Member since:
    Oct 2012

    Posted 22 Jan 2013 Link to this post

    I removed the tabindex and now its working fine. Thanks for your suggestion.
  9. Tim
    Tim avatar
    7 posts
    Member since:
    Jul 2012

    Posted 12 Mar 2013 Link to this post

    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.
  10. Tim
    Tim avatar
    7 posts
    Member since:
    Jul 2012

    Posted 12 Mar 2013 Link to this post

    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.
  11. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 15 Mar 2013 Link to this post

    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.
  12. Tim
    Tim avatar
    7 posts
    Member since:
    Jul 2012

    Posted 15 Mar 2013 Link to this post

    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.
  13. Shivendu
    Shivendu avatar
    4 posts
    Member since:
    Mar 2014

    Posted 05 Aug 2014 Link to this post

    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.
  14. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Aug 2014 in reply to Shivendu Link to this post

    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.
  15. Shivendu
    Shivendu avatar
    4 posts
    Member since:
    Mar 2014

    Posted 05 Aug 2014 in reply to Shinu Link to this post

    Is Not work.


    After page reload, pressing the Tab (Key) .Then focus on address bar of URL.
  16. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Aug 2014 in reply to Shivendu Link to this post

    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.
  17. Shivendu
    Shivendu avatar
    4 posts
    Member since:
    Mar 2014

    Posted 06 Aug 2014 in reply to Shinu Link to this post

    Where did I call this method in page level or usercontrol level and which control event ?
  18. Shivendu
    Shivendu avatar
    4 posts
    Member since:
    Mar 2014

    Posted 06 Aug 2014 in reply to Shinu Link to this post

    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 . 
  19. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Aug 2014 in reply to Shivendu Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017