Removing combobox focus

[Sean]

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);
                    }
                }
            }

[Simon]

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.

[Sean]

Thanks, that works.

[Oleg Slyusarchuk]

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

[Kalina]

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.

[Oleg Slyusarchuk]

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?

[Kalina]

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.