Removing combobox focus

7 posts, 1 answers
  1. Sean
    Sean avatar
    11 posts
    Member since:
    Oct 2008

    Posted 11 May 2009 Link to this post

    I'm trying to get a column of comboboxes to move focus from one to the next one down when the user hits enter.  The code below will move to the next one ok but the current one (and all previous ones) remains highlighted.  Is there a way to deselect the old combo or a different way to change focus?

    ASPX - C#
    cb.Attributes.Add("onkeydown"string.Format("ControlKeyPress(this,event,'{0}',{1});""PurchaseComboBox", dataItem.ItemIndex)); 

    JS
                function ControlKeyPress(sender, args, control, index) {  
                    if (args.keyCode == 13) {  
                        var dataItems = createGrid.get_masterTableView().get_dataItems();  
                        if (index < dataItems.length) {  
                            var nextControl = dataItems[index + 1].findControl(control);  
                            var input;  
                            if (typeof (nextControl.get_inputDomElement) == "undefined") {  
                                input = nextControl;  
                            } else {  
                                input = nextControl.get_inputDomElement();  
                            }  
                            window.setTimeout(function() { input.focus(); }, 0);  
                        }  
                    }  
                }  
     

  2. Answer
    Simon
    Admin
    Simon avatar
    2281 posts

    Posted 14 May 2009 Link to this post

    Hello Sean,

    RadComboBox is not designed to loose its focus programmatically.

    Please use the function below to blur the ComboBox, preferably before you move the focus to another element:

    function blurComboBox(comboBox) { 
        if (comboBox.get_dropDownVisible() && comboBox.get_closeDropDownOnBlur()) 
            comboBox.hideDropDown(); 
         
        comboBox.get_tableElement().className = ""
        comboBox._selectItemOnBlur(); 
        comboBox._focused = false

    Best wishes,
    Simon
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Sean
    Sean avatar
    11 posts
    Member since:
    Oct 2008

    Posted 14 May 2009 Link to this post

    Thanks, that works.
  4. Oleg Slyusarchuk
    Oleg Slyusarchuk avatar
    7 posts
    Member since:
    Jun 2004

    Posted 26 Feb 2010 Link to this post

    Is there any way to remove focus from combobox  in the 2 following scenarios:

    - a user selects values and moves mouse from combobox WITHOUT clicking anywhere else
    - a user opens combobox without making any selections and then moves mouse from combobox WITHOUT clicking anywhere else.
    ?
    Essentially, it comes to implementing mouseout or mouseleave event.

    Would would you suggest?
    By the way, it would be great if CloseDropDownOnBlur="true" worked not only after clicking outside of the combobox but also on mouseout event.
    For me, it's an obvious accessibility requirement.

    Thank you,
    Oleg
  5. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 05 Mar 2010 Link to this post

    Hi Oleg Slyusarchuk,

    Please excuse us for delayed reply.

    To remove the focus in the cases that you describe you need to hook to the "mouseenter" and "mouseleave" events - so you are on the right way.

    I made a simple example for you that shows the required approach:
    <script type="text/javascript" language="javascript">
     
        function onLoad(sender) {
            var div = sender.get_element();
     
            $telerik.$(div).bind('mouseenter', function() {
                if (!sender.get_dropDownVisible())
                    sender.showDropDown();
            });
     
            $telerik.$(".RadComboBoxDropDown").mouseleave(function(e) {
                hideDropDown("#" + sender.get_id(), sender, e);
            });
     
            $telerik.$(div).mouseleave(function(e) {
                hideDropDown(".RadComboBoxDropDown", sender, e);
            });
        }
     
        function hideDropDown(selector, combo, e) {
            var tgt = e.relatedTarget;
            var parent = $telerik.$(selector)[0];
            var parents = $telerik.$(tgt).parents(selector);
     
            if (tgt != parent && parents.length == 0) {
                if (combo.get_dropDownVisible())
                    combo.hideDropDown();
            }
            combo.get_inputDomElement().blur();
            combo._raiseClientBlur(e);
            combo._focused = false;
        }
      
    </script>

    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div>
            <telerik:RadComboBox ID="c1" runat="server" OnClientLoad="onLoad">
                <Items>
                    <telerik:RadComboBoxItem Value="1" Text="text1" />
                    <telerik:RadComboBoxItem Value="2" Text="text2" />
                    <telerik:RadComboBoxItem Value="3" Text="text3" />
                    <telerik:RadComboBoxItem Value="4" Text="text4" />
                    <telerik:RadComboBoxItem Value="5" Text="text5" />
                </Items>
            </telerik:RadComboBox>
        </div>
        </form>

    Greetings,
    Kalina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Oleg Slyusarchuk
    Oleg Slyusarchuk avatar
    7 posts
    Member since:
    Jun 2004

    Posted 05 Mar 2010 Link to this post

    Thank you, Kalina

    Worked like a charm when using a mouse. From accessibility point of view, I need to run the code when I lose focus from the combo using a keyword, or to be more specifically, TAB button.  

    Is there any way to hook a generic blur event that would cover both a mouse and a keyboard?
  7. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 09 Mar 2010 Link to this post

    Hi Oleg Slyusarchuk,

    The requirement that you describe in fact is already implemented in RadComboBox.

    When TAB key is pressed, the RadComboBox dropdown hides (if it is visible) and the control is blurred automatically.

    Can you describe in more details what do you mean? Maybe I am missing something.
     
    Kind regards,
    Kalina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top