ComboBox Focus for quick entry

3 posts, 0 answers
  1. Adam
    Adam avatar
    177 posts
    Member since:
    Oct 2012

    Posted 02 Nov 2011 Link to this post

    I've got a combobox that I want to place focus into the box and have it ready for a person to enter in the next item after they hit the add button. So, the person starts typing the item information, and it finds the match in the drop down, they hit tab and enter to add the item, and the focus then needs to go back to the textbox for them to enter the next item. However, I don't want to clear out the entry of the combobox.

    Originally, I was calling combo.focus in the code behind. That seems to set the focus correctly, but it could place the cursor at the beginning or the end and doesn't select all the text for them to be able to simply start typing again. I've resorted to use this code instead:

    ajxManager.ResponseScripts.Add("$find('" & cboFrom.ClientID & "').get_inputDomElement().focus();$find('" & cboFrom.ClientID & "').selectText(0, $find('" & cboFrom.ClientID & "').get_text().length);")

    It appears to be working, but I just want to know if there is a better method for doing this or if what I have is the best route to go down.

    Thanks,
    Adam
  2.
  3. Adam
    Adam avatar
    177 posts
    Member since:
    Oct 2012

    Posted 02 Nov 2011 Link to this post

    I've switched to using the OnClientFocus event and now I'm doing the following:

    function OnClientFocus(sender, args) {
                    sender.selectText(0, sender.get_text().length);
                }

    From the codebehind, I'm calling the combo.focus, which then seems to call this function and it selects all the text.
  5. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 07 Nov 2011 Link to this post

    Hello Adam,

    For the scenario you are trying to implement, you could either set the focus of the RadComboBox's input field, on client-side pageLoad event, or register  a script, which focuses the RadComboBox on the server.
    Here is an example of the last mentioned scenario:
    function OnClientFocus(sender, args)
    {
        sender.selectText(0, sender.get_text().length);
    }
    <telerik:RadAjaxManager ID="ajaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadComboBox ID="RadComboBox1" runat="server" MarkFirstMatch="true" OnClientFocus="OnClientFocus"
        AutoCompleteSeparator=";" Width="300px">
        <Items>
            <telerik:RadComboBoxItem Text="Arts" />
            <telerik:RadComboBoxItem Text="Biographies" />
            <telerik:RadComboBoxItem Text="Children's Books" />
        </Items>
    </telerik:RadComboBox>
    <asp:Button ID="Button1" runat="server" Text="Add" OnClick="OnClick" />
    protected void OnClick(object sender, EventArgs e)
    {
        RadScriptManager.RegisterStartupScript(Page, GetType(), "setFocus",
        "(function(){ setTimeout(function(){ var combo = $find('RadComboBox1');   
             combo.get_inputDomElement().focus()},20);}())", true);
    }

    You could test this approach and see if it works for the scenario you are trying to implement.

    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
Back to Top