[Solved] AJAX Updating DropdownList while typing in TextBox

[Paul Wood]

I'm attempting to make a quick ajax database lookup while the person types in the Postcode field, with the intention that the suburb and state fields populate when a match is made (postcode is 4 numbers so I guess ideally it wouldn't do a lookup until the postcode field is 4 characters in length).

I can achieve this easily hand coding the AJAX, but am having issues getting the RadAjax controls to do the work. The event is definitely firing, the ajaxRequest method just isn't doing anything. Couldn't find any directly applicable examples or documentation although in my mind it would be a commonly done thing. I just must have missed something.

Here is a small clean example of my code (master page is basic HTML and SQL queries are simple lookups on postcode field).

<%@ Page Language="VB" MasterPageFile="~/legal/Legal.master" AutoEventWireup="false" CodeFile="postcode.aspx.vb" Inherits="legal_postcode" title="Untitled Page" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="cntHead" ContentPlaceHolderID="cplHead" Runat="Server">
  <script type="text/javascript">
    function PostcodeAjax(eventArgs) {
      <%=radAJAX.ClientID%>.ajaxRequest(eventArgs);
    }
  </script>
</asp:Content>
<asp:Content ID="cntBody" ContentPlaceHolderID="cplBody" Runat="Server">
  <asp:ScriptManager ID="scmAJAX" runat="server" />
  <telerik:RadAjaxManager ID="radAJAX" runat="server">
    <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="tbxAddress_Postcode_C">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="tbxAddress_Suburb_C" />
          <telerik:AjaxUpdatedControl ControlID="tbxAddress_State_C" />
        </UpdatedControls>
      </telerik:AjaxSetting>
    </AjaxSettings>
  </telerik:RadAjaxManager>

  <asp:SqlDataSource ID="sqlSuburbList" runat="server" ConnectionString="<%$ ConnectionStrings:PRM_AFPConnectionString %>"
    SelectCommand="usp_AFP_AjaxSuburbList2" SelectCommandType="StoredProcedure">
    <SelectParameters>
      <asp:ControlParameter ControlID="tbxAddress_Postcode_C" Name="Postcode" Type="String" PropertyName="Text" Size="4" />
    </SelectParameters>
  </asp:SqlDataSource>

  <asp:SqlDataSource ID="sqlStateList" runat="server" ConnectionString="<%$ ConnectionStrings:PRM_AFPConnectionString %>"
    SelectCommand="usp_AFP_AjaxStateList" SelectCommandType="StoredProcedure">
    <SelectParameters>
      <asp:ControlParameter ControlID="tbxAddress_Postcode_C" Name="Postcode" Type="String" PropertyName="Text" Size="4" />
    </SelectParameters>
  </asp:SqlDataSource>

  <asp:Label ID="lblAddress_Postcode_C" AssociatedControlID="tbxAddress_Postcode_C" runat="server" Text="Postcode (AU):" />
  <asp:TextBox ID="tbxAddress_Postcode_C" runat="server" onkeyup="PostcodeAjax('tbxAddress_Postcode_C');" MaxLength="4" />
  <br />
  <asp:Label ID="lblAddress_Suburb_C" AssociatedControlID="ddlAddress_Suburb_C" runat="server" Text="Suburb (AU):" />
  <asp:DropDownList ID="ddlAddress_Suburb_C" runat="server" DataSourceID="sqlSuburbList" DataTextField="Suburb" DataValueField="Suburb" />
  <br />
  <asp:Label ID="lblAddress_State_C" AssociatedControlID="ddlAddress_State_C" runat="server" Text="State (AU):" />
  <asp:DropDownList ID="ddlAddress_State_C" runat="server" DataSourceID="sqlStateList" DataTextField="State" DataValueField="State" />

</asp:Content>

[Daniel]

Hello Paul Wood,

Please take a look at these links:
Manually add an AJAX request to a client-side event of an HTML element
Client-Side API

Let me know whether this helps or if you need additional assistance.

Greetings,
Daniel
the Telerik team

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

[Paul Wood]

I'm afraid this doesn't help much. I gleaned all I could from these help pages, made appropriate changes to my code but the dropdowns still did not populate. I put my Javascript in a RadCodeBlock, used the $find function in the Javascript and tried adding an AjaxRequest handler to rebind the dropdowns (even though I thought this was handled by the AjaxManager UpdatedControls section).
e.g.

  Protected Sub radAJAX_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs) Handles radAJAX.AjaxRequest
    ddlAddress_State_C.DataBind()
    ddlAddress_Suburb_C.DataBind()
  End Sub

[Daniel]

Hi Paul,

I made an example for your convenience. Please note that the attached file needs Northwind database in order to be tested successfully.

Best regards,
Daniel
the Telerik team

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

[Paul Wood]

Thanks Daniel, your example is very similar to what I've ended up with. Both your example and my current code both work in a normal page. The problem though is getting it to work when using a master page. This I cannot fathom, the ajaxRequest just never gets fired.

[Daniel]

Hi Paul Wood,

I recommend you to read the following articles:
MasterPages: initiating requests from one ContentPlaceHolder and loading/updating controls in another
RadAjax and MasterPage
MasterPages: ajaxify and update controls in master and content page
I hope they help.

Kind regards,
Daniel
the Telerik team

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

[Paul Wood]

I've submitted a support ticket as this documentation still doesn't explain everything I need to get it working as far as I can see.