Ajax for filling child radcombobox not working

[Vanika]

Hi,
I have 2 radcomboboxes on my page. One for country and one for city. On the selected index changed event of the country dropdowni want to fill my city dropdown, which requires a database hit. I tried the following code, but it is causing postback, and working in ajax.

master page:

 

 

 

<div>

 

 

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

 

 

<Windows>

 

 

<telerik:RadWindow ID="RadWindow1" Height="500px" Width="600px"

 

 

KeepInScreenBounds="true" OnClientShow="OnPopupShow" Behaviors="Close,Pin,Maximize,Reload,Move"

 

 

OnClientClose="OnPopupClose" ReloadOnShow="false" ShowContentDuringLoad="false" Modal="true" runat="server">

 

 

</telerik:RadWindow>

 

 

</Windows>

 

 

</telerik:RadWindowManager>

 

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

 

 

<Scripts>

 

 

<asp:ScriptReference Name="" Assembly="" Path="~/Common/Scripts/Gateway.js" />

 

 

</Scripts>

 

 

</telerik:RadScriptManager>

 

 

 

</div>


Content page - on which Ajax is required:

 

 

<telerik:RadAjaxManager ID="AjaxManagerId" runat="server">

 

 

<AjaxSettings>

 

 

<telerik:AjaxSetting AjaxControlID="Country" EventName="SelectedIndexChanged">

 

 

<UpdatedControls>

 

 

<telerik:AjaxUpdatedControl ControlID="City" LoadingPanelID="loadingPanel" />

 

 

</UpdatedControls>

 

 

</telerik:AjaxSetting>

 

 

</AjaxSettings>

 

 

</telerik:RadAjaxManager>

 

 

<telerik:RadAjaxLoadingPanel ID="loadingPanel" runat="server">

 

 

<asp:Image ID="loadingImage" runat="server" ImageAlign="Middle" ImageUrl="~/Images/Loading.gif">

 

 

</asp:Image>

 

 

</telerik:RadAjaxLoadingPanel>

 

 

<td>

 

Client Country

 

</td>

 

 

<td>

 

 

<telerik:RadComboBox ID="Country" runat="server" Width="150px" OnSelectedIndexChanged="Country_SelectedIndexChanged"

 

 

AutoPostBack="true" Height="170px">

 

 

</telerik:RadComboBox>

 

 

</td>

 

 

<td>

 

Client City

 

</td>

 

 

<td>

 

<%

-- <asp:TextBox ID="ClientCity" runat="server" Width="110px"></asp:TextBox>--%>

 

 

<telerik:RadComboBox ID="City" runat="server" Width="110" AllowCustomText="true"

 

 

MarkFirstMatch="true" ShowToggleImage="false" MaxHeight="170px">

 

 

</telerik:RadComboBox>

 

 

</td>

Please suggest what can be done to ajaxify filling of the child radcombobox.

 

[Vanika]

Can I get some help on this please !!

~Thanks

[Kalina]

Hello Vanika,

Let me suggest you handle OnClientSelectedIndexChanged RadComboBox event and call the RadAjaxManager client-side function ajaxRequest():

<script type="text/javascript">

    function OnClientSelectedIndexChanged(sender, eventArgs) {
        var city = $find("<%= City.ClientID %>");
        city.set_text("");

        var items = city.get_items();
        items.clear();

        var ajaxManager = $find("<%= AjaxManagerId.ClientID %>");
        var item = eventArgs.get_item();
        ajaxManager.ajaxRequest(item.get_value());
    }
</script>

Then handle the OnAjaxRequest server event:

<telerik:RadAjaxManager ID="AjaxManagerId" runat="server"
    OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="City"
                    LoadingPanelID="loadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

public void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

   // populate the City RadComboBox with data


}

Please find more details at sample page attached.


All the best,
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.

[Vanika]

It still shows a postback, not the loading image, and I verified that the method

RadAjaxManager1_AjaxRequest is being called in codebehind and

 

OnClientSelectedIndexChanged in the aspx.

Any other solution ??

[Kalina]

Hello Vanika,

The RadAjaxManager control in the sample page performs an AJAX request which is different from the full page postback. This can be easily checked using the RadAjaxManager.IsAjaxRequest property.

Please find the sample page attached - I made some changes in order to make it easier for you to understand this approach.

If the issue persists could you please paste the full code of your implementation here using the "Format code block" tool?
Thank you in advance.

All the best,
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.