[Solved] Focus combobox...

[Joan Vilariño]

I have a Combobox template in one of my grids and I want it to autofocus at inline edit time.

I tried this:

<%=Html.Telerik().ComboBox().Name("myCombo")
    .DataBinding(db => db.Ajax().Select("_getItems","myCöntroller").Delay(500))
    .Filterable(ft => ft.FilterMode(AutoCompleteFilterMode.Contains).MinimumChars(5))
%>

<script type="text/javascript">

$(document).ready(function () { $('#myCombo').focus(); }

</script>

This doesn't work... any suggestion ?

[Sean]

Well according to the docs I thought this might be $('#myCombo').data('tComboBox').focus();   but no dice...this should be a client event IMO. Drivng me nuts.

[Georgi Krustev]

Hi,

 In order to select ComboBox UI component you will need to focus visible input:

$(document).ready(function () { $('#myCombo').parent().find("input:first").focus(); }

Best regards,
Georgi Krustev
the Telerik team

[Georgi Krustev]

Hi,

 In order to select ComboBox UI component you will need to focus visible input:

$(document).ready(function () { $('#myCombo').parent().find("input:first").focus(); }

Best regards,
Georgi Krustev
the Telerik team

[Sean]

Is there a way to hook the focus event?

$('#target').focus(function() {
  alert('Handler for .focus() called.');
});

Also would it be the same syntax for Autocomplete? I'd like to call open on both my ComboBox and AutoComplete controls when they get focus. Is that even possible?

Thanks!

[Georgi Krustev]

Hello Sean,

 
ComboBox has the ability to open on focus or not. You can check this demo for more information.  Check "open on focus" checkbox and click "Apply". Thus you will set ComboBox UI component to open on focus.
In order to enable this functionality on client with JavaScript you will need to use this code snippet:

$("#ComboBox").data("tComboBox").openOnFocus = true;

As to the AutoComplete component, you can achieve this unsupported functionality with the following code excerpt:

$("#AutoComplete").focus(function(e){ $(this).data("tAutoComplete").open(); });

All the best,
Georgi Krustev
the Telerik team

[Sean]

Hi Georgi,

Thanks for the help. It turns out that what I did wrong in the first place was add a script tag to the page and put the code in the script tag. It never worked. What I had to do was create a .js file and add that to the ScriptRegistrar! Of course after doing that the jQuery focus stuff works like a champ.

@(Html.Telerik().ScriptRegistrar().Scripts(scripts =>
scripts.AddGroup(

 

"editpage", group =>
group.Add("~/Scripts/EditPage.js"))

 

 

))

So just FYI you might want to make sure you rule that out on other support issues, hope that helps.

One quick follow-up question:  now that I have the AutoComplete opening on focus, how can I get it to both open AND rebind? I have a dependency on another listbox as to what shows in the AutoComplete  so if I get the same autocomplete list every time that's no good.

Thanks!

Sean

[Georgi Krustev]

Hello Sean,

 
To rebind AutoComplete component you will need to call dataBind() method with the correct arguments:

$("#AutoComplete").focus(function(e){
var autoComplete = $(this).data("tAutoComplete");
autoComplete.dataBind(["1", "2", "3"], true /*if you need to keep input value*/);
autoComplete.open();
});


Regards,
Georgi Krustev
the Telerik team