RadComboBox autocomplete search - Get SelectedValue when press the EnterKey

Scenario:- In a situation where Enter KeyPress is configured to fire up a button event(Eg : Search) and  there is a autocomplete search  in RadComboBox;  How to get the RadComboBox SelectedValuein the keypress event?

Sample
Web Page(aspx)

<script type="text/javascript">

        function keyHandler(event) {

            var ENTERKEY = 13;

            var firedKey = (event.keyCode) ? event.keyCode : event.charCode;

            if (firedKey == ENTERKEY) {

                Search();

            }

        }

        function Search() {

            var postBackValue;

            var controlClientID = "<%= btnSearch.ClientID %>";

            postBackValue = controlClientID;

            while (postBackValue.indexOf('_') > -1)

                postBackValue = postBackValue.replace('_', '$');

            __doPostBack(postBackValue, '');

        }

</script>

<div id="Div1" runat="server" onkeydown="keyHandler(event)">

<telerik:RadComboBox ID="RadCmbUser" runat="server" Skin="Myskin" EnableLoadOnDemand="True"

EnableVirtualScrolling="True" EmptyMessage="Search for User..." AutoPostBack="True" OnItemsRequested="RadCmbUser_ItemsRequested" ItemsPerRequest="5" MarkFirstMatch="True">

</telerik:RadComboBox>

<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_OnClick" />

</div>

Web Page(cs)
 

protected void RadCmbUser_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)

{

   IEnumerable<User> users = UsersList.Where(a => a.UserName.StartsWith(e.Text));

   foreach (User user in users)

     {

        RadCmbUser.Items.Add(new RadComboBoxItem(user.UserName, user.UserId.ToString()));

     }

}

protected void btnSearch_OnClick(object sender, EventArgs e)

{

       dataGrid.DataSource = GetUserInformationList(RadCmbUser.SelectedValue);

}

Display RadAjaxLoadingPanel when there are several UserControls in a web page.

Suppose you have a web page(aspx) with three UserControls.When there is a change in UserControl1 you want to do an asynchronous load for UserControl2 by displaying RadAjaxLoadingPanel on top of that.
We can use the AddAjaxSetting method in Page_Load event to implement the above task.
Sample:
RadAjaxManager.GetCurrent(this.Page).AjaxSettings.AddAjaxSetting(UserControl1, UserControl2, RadAjaxLoadingPanel)

In this case, you can see that asynchronous load of UserControl2 happening successfully, but RadAjaxLoadingPanel is not displaying.

According to Telerik supporting team, “UserControls does not render any HTML element and that is why the loading panel is not shown!”

More info: http://www.telerik.com/community/forums/aspnet-ajax/ajax/radajaxloadingpanel-work-w-usercontrols.aspx

Alternative solution is,  

• First we have to identify an event which is occurring inside the UserControl1. Suppose in this scenario we have a click event of a asp:Button inside the UserControl1. 
• In the web page, place the UserControl2 inside a asp:Panel control.
• Use theAddAjaxSetting method, in web page Page_Load event by passing Button Id and Panel Id as parameters.

Sample Code 

Web Page(aspx) 

<uc1:UserControl1 ID="uc1" runat="server"/>
<asp:Panel ID="Panel" runat="server"> 
  <uc1:UserControl2 ID="uc2" runat="server"/>
</asp:Panel>
<uc1:UserControl3 ID="uc3" runat="server"/>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" >
</telerik:RadAjaxLoadingPanel>

Web Page(cs)
protected void Page_Load(object sender, EventArgs e)

{

  Button btnConfirm = (Button)uc1.FindControl("Button1");    
  RadAjaxManager.GetCurrent(this.Page).AjaxSettings.AddAjaxSetting(btnConfirm, Panel1, RadAjaxLoadingPanel1);

}

How to handle TextBox event through AJAX Manager Proxy(RadControl)

To handle the OnClick event of a asp:button, we can easily configure the AJAX Manager Proxy control by setting AjaxControlID property to the ID of the asp:button.
But to handle an event fired from a asp:textbox we need to set an additional property named EventName. We have to set the proper textbox event in order to handle it by AJAX Manager Proxy


Sample
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
 <AjaxSettings>
  <telerik:AjaxSetting AjaxControlID="Button1">
   <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="DetailsView1" />
    <telerik:AjaxUpdatedControl ControlID="GridView1" />
   </UpdatedControls>
  </telerik:AjaxSetting>

  <telerik:AjaxSetting AjaxControlID="TextBox1" EventName="OnTextChanged">
   <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="GridView1" />
    <telerik:AjaxUpdatedControl ControlID="DetailsView1" />
   </UpdatedControls>
  </telerik:AjaxSetting>
 </AjaxSettings>
</telerik:RadAjaxManagerProxy>