[Solved] can focus be set? and after callback?

[matt]

hello,

i have two RadComboBoxes on my page: CarMake, CarModel. when the user selects a CarMake, it initiates a callback via an RadAjaxManager and updates the list collection on CarModel via code-behind.

this works.

however, a problem -- my users use a keyboard and need to tab from one item to the next. currently after the callback completes and the second RadComboBox is bound, the focus is lost..it defaults to the top of the page. no good. ive tried setting the focus in my callback code-behind, but it does nothing.

1) how can i set the focus after an ajax databind?

2) is this how i should be doing the ajax-goodness? or should it use client-side events & handlers?

my ASPX

<Telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <%-- Make updates Model --%>
        <Telerik:AjaxSetting AjaxControlID="rcbVehicleMake">
            <UpdatedControls>
                <Telerik:AjaxUpdatedControl ControlID="rcbVehicleModel" />
            </UpdatedControls>
        </Telerik:AjaxSetting>
    </AjaxSettings>
</Telerik:RadAjaxManager>


<span class="formLabel">Make:</span><br />
<!-- by setting AutoPostBack=true, and using the AjaxManager, we can make this auto-update the Model list -->
<Telerik:RadComboBox ID="rcbVehicleMake" DataValueField="MakeCode" DataTextField="Description" Width="150" DropDownWidth="200" ShowToggleImage="false" AllowCustomText="False" MarkFirstMatch="true" OnSelectedIndexChanged="rcbVehicleMake_SelectedIndexChanged" AutoPostBack="true" runat="server"/>

<br/><br/>

<span class="formLabel">Model:</span><br />
<Telerik:RadComboBox ID="rcbVehicleModel" DataValueField="ModelID" DataTextField="Description" Width="80" DropDownWidth="125" ShowToggleImage="false" AllowCustomText="False" MarkFirstMatch="true" runat="server" />

code-behind

protected void rcbVehicleMake_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
{
    SetVehicleModel();
}

private void SetVehicleModel()
{
    //clear old values
    rcbVehicleModel.Items.Clear();
    rcbVehicleModel.Text = string.Empty;

    string make = rcbVehicleMake.SelectedValue;

    if (Strings.Exists(make))
    {
        rcbVehicleModel.DataSource = Lookups.GetVehicleModelsByMake(make);
        rcbVehicleModel.DataBind();
        rcbVehicleModel.Items.Insert(0, new RadComboBoxItem());

        //trying to set the focus..not working
        rcbVehicleModel.Focus();
        Page.SetFocus(rcbVehicleModel);
    }
}

thanks!
matt

[Rosi]

Hello matt,

I suggest you hook on the OnClientResponseEnd event of RadAjaxManager and focus RadComboBox in its event handler in the following way:

<script>

function OnClientResponseEnd()
{
  var combo = $find("<%= rcbVehicleModel.ClientID %>");
  var inputArea = combo.get_inputDomElement();
  inputArea.focus();
}
</script>

Hope this helps.

Regards,
Rosi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[matt]

rosi,

that sounds great, but i do not see an event by that name on the RadAjaxManager control.

can you please show me an example of how to hook on that specific event in the fashion youve mentioned?


matt

[Rosi]

Hello Matt,

I am sorry for the misunderstanding. Actually the name of the event is OnResponseEnd.
More about it and an example how to use it you can find here.

Regards,
Rosi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[matt]

rosi,

thank you for the update.

however ive discovered another problem w/ this proposed solution -- the event handler youve cited fires for every <AjaxSettings> item listed in the RadAjaxManager. this means the focus is re-set every time my (completely unrelated) RadGrid initiates a callback.

i need something that only re-sets the focus when the RadComboBox in question is changed. how can this be done?


matt

[matt]

hello rosi,

per my last post -- can this not be done? i dont want to set the focus on *any* ResponseEnd from the AjaxManager, only for a *specific* event's ResponseEnd.


thanks
matt

[Rosi]

Hi Matt,

You can hook on OnResponseStart event of RadAjaxManager
then you can check is the ajax caller combobox or not. If it is then set a global variable to true.
After that you can check is this variables set to true in OnResponseEnd event and execute the code only if it is true.

For example:

<script>
var boolVariable  = false;

function OnResponseStart ()
{
  if(  eventArgs.get_eventTarget() ==  $find("<%= rcbVehicleModel.ClientID %>"))
        boolVariable  = true;

}

function OnClientResponseEnd()
{
    if(boolVariable )
   {
      var combo = $find("<%= rcbVehicleModel.ClientID %>");
      var inputArea = combo.get_inputDomElement();
      inputArea.focus();
    }

  boolVariable = false;
}

</script>

Kind regards,
Rosi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jim]

I'm trying to do something similar to this, but

1. the onRequestStart and onRequestEnd functions are only called in response to the events if I have already called them once when the page is loaded,
2. when they are called, the sender and eventArgs arguments are always null, and
3. onRequestStart is only called after the callback has been processed.

Any idea what's going on?

I'm using Q3 2008.

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
    onRequestStart(null, null);
    onResponseEnd(null, null);
    function onRequestStart(sender, eventArgs) {
        alert("onRequestStart " + sender + " " +eventArgs);
    }
    function onResponseEnd(sender, eventArgs) {
        alert("onResponseEnd " + sender + " " +eventArgs);
    }
</script>
</telerik:RadScriptBlock>

<telerik:RadAjaxManager ID="AjaxMgr" runat="server" OnAjaxRequest="AjaxRequest">
<telerik:ClientEvents OnRequestStart="onRequestStart" OnResponseEnd="onResponseEnd" />
    <telerik:AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="EditLabelDescription">
            <telerik:UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="EditLabelDescription"/>
            </telerik:UpdatedControls>
        </telerik:AjaxSetting>
    </telerik:AjaxSettings>
</telerik:RadAjaxManager>

[Jim]

If I use OnResponseStart, it does not compile.  Apparently there is no such event on RadAjaxManager.

I want to set the focus on the RadComboBox when the page is loaded, but neither Focus() nor form1.DefaultFocus (both server side) works with RadComboBox.

I finally solved the problem using OnClientLoad="GiveMeFocus" on the RadComboBox, where GiveMeFocus is defined as follows:

function GiveMeFocus(sender, eventArgs) {
     sender.get_inputDomElement().focus();
}

[Veselin Vasilev]

Hello James,

RadAjaxManager and RadAjaxPanel have the following methods: OnRequestStart and OnResponseEnd.

As for the focus of the combobox you can check this help topic:
How to > Focus the combobox

Sincerely yours,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.