Cannot setfocus to RadComboBox

9 posts, 0 answers
  1. Timothy Kruszewski
    Timothy Kruszewski avatar
    76 posts
    Member since:
    Feb 2010

    Posted 20 Sep 2011 Link to this post

    I've been stuggling with this issue all day long and can't figure out how to setfocus to a RadComboBox control.  When the sefocus method is called for a particlular control I can see the cursor enter into the textbox of the control but then it moves to the dropdown button. What am I doing wrong??
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindPage();
                    ActionDate.SelectedDate = DateTime.Now;
                    SetFocus(ddlUserName.ClientID + "_Input");
                }
     
            }

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="QuickTicketDetail.aspx.cs"
        Inherits="TED.Web.PopUps.QuickTicketDetail" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html >
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <script type="text/javascript">
            function CloseAndRebind(args) {
                GetRadWindow().BrowserWindow.refreshGrid(args);
                GetRadWindow().close();
            }
     
            function GetRadWindow() {
                var oWindow = null;
                if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
                else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)
     
                return oWindow;
            }
     
            function CancelEdit() {
                GetRadWindow().close();
            }
        </script>
        <asp:ValidationSummary ID="valSummary" runat="server" ValidationGroup="valSummary"
            DisplayMode="BulletList" ShowMessageBox="true" ShowSummary="false" />
        <div style="float: left;">
            <asp:LinkButton ID="lnkSave" runat="server" SkinID="LinkButton_Save" CssClass="LinkButton"
                OnClick="Save" CausesValidation="true" ValidationGroup="valSummary"></asp:LinkButton>
        </div>
        <br />
        <br />
        <div class="divLabel">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        <asp:Label ID="lblWhatHappened" runat="server" SkinID="Label_Bold_8pt" Text="What Happened:"
                            Width="100px"></asp:Label>
                    </td>
                    <td>
                        <telerik:RadEditor ID="TicketDetail" runat="server" Width="350" Height="100" Skin="Web20"
                            StripFormattingOptions="All" AllowScripts="false" EditModes="Design">
                            <CssFiles>
                                <telerik:EditorCssFile Value="../App_Themes/Control Themes/EditorContentArea.css" />
                            </CssFiles>
                            <Tools>
                                <telerik:EditorToolGroup>
                                    <telerik:EditorTool Name="AjaxSpellCheck" />
                                </telerik:EditorToolGroup>
                            </Tools>
                        </telerik:RadEditor>
                        <asp:RequiredFieldValidator ID="rfvTDTicketDetail1" runat="server" ControlToValidate="TicketDetail"
                            ErrorMessage="What Happened" ValidationGroup="valSummary">*</asp:RequiredFieldValidator>
                    </td>
                    <td>
                        <asp:CheckBox ID="cbInternal" runat="server" SkinID="CheckBox" Text="Internal Update"
                            TextAlign="Right" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblWhatsNext" runat="server" SkinID="Label_Bold_8pt" Text="Whats next:"
                            Width="100px"></asp:Label>
                    </td>
                    <td>
                        <telerik:RadEditor ID="Next" runat="server" Width="350" Height="100" Skin="Web20"
                            StripFormattingOptions="All" AllowScripts="false" EditModes="Design">
                            <CssFiles>
                                <telerik:EditorCssFile Value="../App_Themes/Control Themes/EditorContentArea.css" />
                            </CssFiles>
                            <Tools>
                                <telerik:EditorToolGroup>
                                    <telerik:EditorTool Name="AjaxSpellCheck" />
                                </telerik:EditorToolGroup>
                            </Tools>
                        </telerik:RadEditor>
                        <asp:RequiredFieldValidator ID="rfvNext" runat="server" ControlToValidate="next"
                            ErrorMessage="Whats Next" ValidationGroup="valSummary">*</asp:RequiredFieldValidator>
                    </td>
                </tr>
            </table>
        </div>
        <div class="divLabel">
            <asp:Label ID="lblActionDate" runat="server" SkinID="Label_Bold_8pt" Text="Action Date:"
                Width="100px"></asp:Label>
            <telerik:RadDatePicker ID="ActionDate" runat="server" Width="90px">
            </telerik:RadDatePicker>
            <asp:RequiredFieldValidator ID="rfvActionDate" runat="server" ControlToValidate="ActionDate"
                ErrorMessage="Action Date Required" Text="*" ValidationGroup="valSummary"></asp:RequiredFieldValidator>
        </div>
        <div class="divLabel">
            <asp:Label ID="lblTDCommunicationType" runat="server" SkinID="Label_Bold_8pt" Text="Comm Type:"
                Width="100px"></asp:Label>
            <telerik:RadComboBox ID="ddlCommunicationType" runat="server" Skin="Web20" AllowCustomText="false"
                MarkFirstMatch="true" Width="100px">
            </telerik:RadComboBox>
            <asp:RequiredFieldValidator ID="rfvCommType" runat="server" ControlToValidate="ddlCommunicationType"
                ErrorMessage="Communication Type Required" Text="*" ValidationGroup="valSummary"></asp:RequiredFieldValidator>
        </div>
        <div class="divLabel">
            <asp:Label ID="lblDTDetailTime" runat="server" Text="Detail Time: " SkinID="Label_Bold_8pt"
                Width="100px"></asp:Label>
            <asp:TextBox ID="txtTDTicketDetailTime" runat="server" Width="50px"></asp:TextBox>
            <asp:CompareValidator ID="cvTDTicketDetailTime" runat="server" ControlToValidate="txtTDTicketDetailTime"
                ErrorMessage="*" Operator="DataTypeCheck" Type="Currency" ValidationGroup="valSummary"></asp:CompareValidator>
            <asp:CompareValidator ID="cmvTicketDetailTime" runat="server" ControlToValidate="txtTDTicketDetailTime"
                ValueToCompare="0" Type="Currency" ErrorMessage="Detail time must be greater than 0"
                Text="*" ValidationGroup="valSummary" Operator="GreaterThan"></asp:CompareValidator>
            <telerik:RadComboBox ID="ddlType" runat="server" Skin="Web20" AllowCustomText="false"
                MarkFirstMatch="true" Width="75px">
                <Items>
                    <telerik:RadComboBoxItem Text="Minutes" Value="1" Selected="true" />
                    <telerik:RadComboBoxItem Text="Hours" Value="2" />
                </Items>
            </telerik:RadComboBox>
            <telerik:RadComboBox ID="ddlUserName" runat="server" Skin="Web20" AllowCustomText="false"
                MarkFirstMatch="true" Width="150px" AutoPostBack="true">
            </telerik:RadComboBox>
            <asp:Label ID="lblAssist" runat="server" Text="Asst:" SkinID="Label_Bold_8pt"></asp:Label>
            <telerik:RadComboBox ID="ddlAssistUser" runat="server" Skin="Web20" AllowCustomText="false"
                MarkFirstMatch="true" Width="150px" AutoPostBack="true">
            </telerik:RadComboBox>
        </div>
        <div class="divLabel">
        </div>
        </form>
    </body>
    </html>

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Sep 2011 Link to this post

    Hello Timothy,

    To focus the combobox on the client side, you should follow the steps below:

    • Get the client-side instance of the combobox
    • Get the DOM element of the input field
    • Focus the input field

    Javascript:
    function SetFocus()
    {
        var comboBox = $find("<%=RadComboBox1.ClientID %>");
        var input = comboBox.get_inputDomElement();
        input.focus();
    }

    Thanks,
    Shinu.
  3. Timothy Kruszewski
    Timothy Kruszewski avatar
    76 posts
    Member since:
    Feb 2010

    Posted 21 Sep 2011 Link to this post

    Thanks Shinu, I've seen that implementation but not sure I can apply it for my situation.  In my case I have to set focus from one control to the next and there are about 10 controls on the page.  So when I user selects the client combobox it needs to focus on the location comobox, when the user selects the location combobox it needs to focus on the user combobox, ect..
  4. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 23 Sep 2011 Link to this post

    Hi Timothy,

    I have tested the code you have pasted here.
    The SetFocus method you are using in code-behind to set a focus on a particular control is working fine.

    Could you please send a support ticket with the problem you are experiencing and provide us with more information about the behavior you are trying to achieve?

    Also, in the support ticket you could attach a sample demo illustrating the issue.

    Best wishes,
    Ivana
    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
  5. Timothy Kruszewski
    Timothy Kruszewski avatar
    76 posts
    Member since:
    Feb 2010

    Posted 23 Sep 2011 Link to this post

    Thanks Ivana, I tested the code out in a new fresh project and it worked. I must have some code on a master page or somewhere else that is causing it to fail. 

    Thanks, Tim
  6. Timothy Kruszewski
    Timothy Kruszewski avatar
    76 posts
    Member since:
    Feb 2010

    Posted 23 Sep 2011 Link to this post

    After doing some additional testing I have discovered that the set focus issue work fine when I remove the RadEditor from the page.  I've tested this in two different projects and came up with the same results. 
  7. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 27 Sep 2011 Link to this post

    Hi Timothy,

    Try the following code snippet:

    JavaScript:
    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function ()
            {
                setTimeout(function ()
                {
                    $find("<%=ddlUserName.ClientID %>").get_inputDomElement().focus();
                }, 0);
            });
        </script>
    </telerik:RadScriptBlock>

    Hope it helps.

    All the best,
    Ivana
    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. Jeremy
    Jeremy avatar
    10 posts
    Member since:
    Nov 2007

    Posted 30 Dec 2012 Link to this post

    Timothy is right, it's the editor control causing the issue as I have the same problem and removing the editor control allows the focus to be set to the combo as expected.

    Ivana's last suggestion does work, but will not help me. I need to set the focus conditionally plus the drop down is disabled at times. Using  Sys.Application.add_load is not a good solution for me.

    Any other ideas?
  9. Nencho
    Admin
    Nencho avatar
    1874 posts

    Posted 03 Jan 2013 Link to this post

    Hello Timothy,

    Could you specify the version of our controls that you use at your end? In addition, I would like to ask you to provide us the implementation that you use, so we could perform some tests locally and help you troubleshoot the problem.


    Kind regards,
    Nencho
    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.
Back to Top