RadAjax with post back

[Way Hang Wee]

Hi,
I have 2 drop down list.
DropDownList1 is put inside RadAjaxPanel, and i set the RadAjaxManager where DropDownList1 will update content of DropDownList2 so that the page don't post back when DropDownList1.SelectedIndexChanged is fired.
DropDownList2 is not inside RadAjaxPanel, because i want the post back to happen when DropDownList2.SelectedIndexChanged is fired. But in this case, it's not post back.
What should i do so that my DropDownList1 does not post back (and update DropDownList2 when DropDownList1.SelectedIndexChanged is fired) but my DropDownList2 is post back (when DropDownList2.SelectedIndexChanged is fired)?
Thanks!

[Way Hang Wee]

Hi, no response from Telerik?

[robertw102]

Could you show us the aspx page your using, so we can see how your page is setup? Do you have the second drop-down list set to AutoPostback="true"?

[Way Hang Wee]

Default.aspx:

<%

@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TelerikAjaxPanel._Default" %>

 

<%

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml" >

 

<

 

head runat="server">

 

 

<title>Untitled Page</title>

 

</

 

head>

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

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

 

 

</telerik:RadScriptManager>

 

 

<div>

 

 

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="200px" HorizontalAlign="NotSet" width="300px">

 

 

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">

 

 

<asp:ListItem>Item 1</asp:ListItem>

 

 

<asp:ListItem>Item 2</asp:ListItem>

 

 

</asp:DropDownList>&nbsp;

 

 

</telerik:RadAjaxPanel>

 

 

<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True"></asp:DropDownList>

 

 

 

</div>

 

 

<telerik:RadAjaxManager runat="server">

 

 

<AjaxSettings>

 

 

<telerik:AjaxSetting AjaxControlID="DropDownList1">

 

 

<UpdatedControls>

 

 

<telerik:AjaxUpdatedControl ControlID="DropDownList2" />

 

 

</UpdatedControls>

 

 

</telerik:AjaxSetting>

 

 

</AjaxSettings>

 

 

</telerik:RadAjaxManager>

 

 

</form>

 

</

 

body>

 

</

 

html>

Default.aspx.vb

 

Partial

 

Public Class _Default

 

 

Inherits System.Web.UI.Page

 

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

 

 

End Sub

 

 

 

 

 

Private Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged

 

 

If DropDownList1.SelectedIndex = 0 Then

 

 

 

 

DropDownList2.Items.Clear()

DropDownList2.Items.Insert(0,

"[Please select one]")

 

DropDownList2.Items.Insert(1,

"Sub item for Item 1")

 

 

Else

 

 

 

 

DropDownList2.Items.Clear()

DropDownList2.Items.Insert(0,

"[Please select one]")

 

DropDownList2.Items.Insert(1,

"Sub item for Item 2")

 

 

End If

 

 

 

 

 

End Sub

 

End

 

Class

 

[Pavlina]

Hello,

We highly recommend avoid working with the RadAjaxManager & RadAjaxPanel controls at the same time. Please use the controls depending on your exact scenario as recommended here.

For more information, about how to avoid the unexpected behavior, review the help articles below:
Ajaxified control still postbacks
Ajaxifying controls wrapped in RadAjaxPanel and added to AJAX Manager settings

Best wishes,
Pavlina
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.

[Way Hang Wee]

Hi,
I don't think the article you showed me is similar to my scenario.

Anyway, i tried use RadAjaxManager without RadAjaxPanel. Both my drop down list AutoPostBack = True, and i set RadAjaxManager to update content of DropDownList2 from DropDownList1. Below is the aspx snippet:

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
 <asp:ListItem>Item 1</asp:ListItem>
 <asp:ListItem>Item 2</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True"></asp:DropDownList>

<telerik:RadAjaxManager runat="server">
 <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="DropDownList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DropDownList2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManager>

DropDownList1 is able to update content of DropDownList2 without problem. But my DropDownList2 is not post back even though i didn't put DropDownList2 into RadAjaxPanel.

I also tried putting DropDownList1 into asp panel instead of RadAjaxPanel then use RadAjaxManager to update content of DropDownList2 from asp panel as suggested from 1 of the article:

<asp:Panel ID="Panel1" runat="server">
 <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
  <asp:ListItem>Item 1</asp:ListItem>
                <asp:ListItem>Item 2</asp:ListItem>
 </asp:DropDownList>&nbsp;
</asp:Panel>

<telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DropDownList2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManager>

But again, DropDownList1 is able to update content of DropDownList2 without problem. But my DropDownList2 is not post back even though i didn't put DropDownList2 into RadAjaxPanel.

In both scenario above, my code behind:
Private Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
        If DropDownList1.SelectedIndex = 0 Then
            DropDownList2.Items.Clear()
            DropDownList2.Items.Insert(0, "[Please select one]")
            DropDownList2.Items.Insert(1, "Sub item for Item 1")
        Else
            DropDownList2.Items.Clear()
            DropDownList2.Items.Insert(0, "[Please select one]")
            DropDownList2.Items.Insert(1, "Sub item for Item 2")
        End If
End Sub

May be i rephrase my scenario:
I have 2 drop down list. Both drop down list i set it to AutoPostBack = True.
Whenever DropDownList1_SelectedIndexChanged, i'll need to update content of DropDownList2. But i don't want to have post back when DropDownList1_SelectedIndexChanged, which means the post back of DropDownList1 need to be ajaxified.
Whenever DropDownList2_SelectedINdexChanged, i would like to have a page post back and not ajaxified.

Please advise what should i do so that my DropDownList1 post back is ajaxified (and update DropDownList2 when DropDownList1.SelectedIndexChanged is fired) but my DropDownList2 post back is not ajaxified (when DropDownList2.SelectedIndexChanged is fired)?
Thanks!

[Pavlina]

Hi Way Hang Wee,

If you want to exclude a control from ajaxifying you can use one of the following approaches:
Exclude controls from ajaxifying

Regards,
Pavlina
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.

[Way Hang Wee]

ok that solves the problem!
Thanks!