RadAjaxPanel not working with RadTreeView

[Nandakumar]

Hi,

I have two radcombo boxes with radtreeviews inside them. These controls are placed inside a RadAjaxPanel. But when i do a selection change in the treeview, the entire page posts back instead of performing ajax request. I have a couple of buttons placed with in this ajaxpanel and all of them raises an ajax request instead of a complete postback.Even an asp.net dropdownlist placed just above the radcombobox raises an ajax request instead of posting back the entire page.
The problem is there only with the radcomboboxes with radtreeviews. Below is a rough layout of the control hierarchy on my page.

<RadAjaxLoadingPanel>
<RadAjaxPanel>
              <ASP:Repeater>
                           <Button1>(Raises ajax request)
                            <Button2>(Raises ajax request)
              </ASP:Repeater>
              <RadDockLayout>
                                  <RadDockZone>
                                              <RadDock>
                                                   <ASP:DropDownList OnSelectedIndexChanged="EventHanler">
                                                    (Raises ajax request on SelectionIndexChanged)
                                                       <RadComboBox>
                                                              <ItemTemplate>
                                                                 <RadTreeView id="Tree1" OnNodeClick="On_NodeClick1">
                                                                   </RadTreeView>
                                                                    (Posts back the page on OnNodeClick)
                                                             </ItemTemplate>
                                                      </RadComboBox>
                                              </RadDock>
                                  </RadDockZone>
                                  <RadDockZone>
                                              <RadDock>
                                                       <RadComboBox>
                                                            <ItemTemplate>
                                                                <RadTreeView id="Tree2" OnNodeClick="On_NodeClick2">
                                                                 </RadTreeView>
                                                                  (Posts back the page)
                                                           </ItemTemplate>
                                                      </RadComboBox>
                                              </RadDock>
                                              </RadDock>
                                  </RadDockZone>
              </RadDockLayout>
</RadAjaxPanel>


Please let me know why this is happening and what i need to do to avoid a postback.

Thank You,
Nanda

[Pavlina]

Hi Nanda,

Can you recreate the problem in a simpler way so we can reproduce it locally?
Ideally, you can send us a sample running project (in a support ticket) so we can debug it.

Greetings,
Pavlina
the Telerik team

[Nandakumar]

Hi Pavlina,

Here it is,

The ASPX:

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="RadAjaxLoadingPanel2"
            CssClass="ajaxpanel">
         <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" HorizontalAlign="Center"
                BackgroundPosition="None" Direction="LeftToRight" Skin="Vista" IsSticky="false">
                <div style="padding-top: 100px; padding-bottom: 100px; padding-left: 600px; width: 300px">
                    <img src="/load.gif" /><br />
                    <span style="width: 300px"><b id="ajaxLoadingMessage">Raising Ajax Request</b></span>
                </div>
            </telerik:RadAjaxLoadingPanel>
            <div>
                <h1>
                    This is the RadAjax Panel
                </h1>
                <table>
                    <tr>
                        <td>
                            <!--bof:sidebar-->
                            <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Web20">
                                <telerik:RadDockZone ID="RadDockZone1" runat="server">
                                    <telerik:RadDock ID="RadDock1" runat="server" Title="Rad Dock 1" CssClass="divPadding"
                                        Height="300px" EnableAnimation="true" DefaultCommands="ExpandCollapse">
                                        <ContentTemplate>
                                            <div>
                                                <b>The below drop down raises ajax request on selected index changed:</b></div>
                                            <div>
                                                <asp:DropDownList ID="dropDownTest" AutoPostBack="true" Width="150px" runat="server"
                                                    OnSelectedIndexChanged="dropDownTest_SelectedIndexChanged">
                                                    <asp:ListItem Text="V1" Value="1"></asp:ListItem>
                                                    <asp:ListItem Text="V2" Value="2"></asp:ListItem>
                                                    <asp:ListItem Text="V3" Value="3"></asp:ListItem>
                                                    <asp:ListItem Text="V4" Value="4"></asp:ListItem>
                                                </asp:DropDownList>
                                            </div>
                                            <div>
                                                <b>The below buttons raises ajax requests</b></div>
                                            <div>
                                                <asp:LinkButton ID="btnOne" runat="server" Text="Click" />
                                            </div>
                                            <div>
                                                <asp:LinkButton ID="btnTwo" runat="server" Text="Click" />
                                            </div>
                                            <div>
                                                <b class="divPadding error">This combo box posts back the page</b>
                                                <telerik:RadComboBox ID="radComboBox1" Width="200px" EmptyMessage="Please Select"
                                                    runat="server">
                                                    <ItemTemplate>
                                                        <div>
                                                            <telerik:RadTreeView ID="radTreeView1" runat="server" CollapseAnimation-Type="None"
                                                                Height="240px" OnNodeClick="On_TreeView1NodeClick" Skin="Vista" ExpandAnimation-Type="None">
                                                                <Nodes>
                                                                    <telerik:RadTreeNode Text="N1" Value="N1" Expanded="true">
                                                                        <Nodes>
                                                                            <telerik:RadTreeNode Text="N1" Value="11">
                                                                            </telerik:RadTreeNode>
                                                                            <telerik:RadTreeNode Text="N1" Value="12">
                                                                            </telerik:RadTreeNode>
                                                                            <telerik:RadTreeNode Text="N1" Value="13">
                                                                            </telerik:RadTreeNode>
                                                                            <telerik:RadTreeNode Text="N1" Value="14">
                                                                            </telerik:RadTreeNode>
                                                                        </Nodes>
                                                                    </telerik:RadTreeNode>
                                                                    <telerik:RadTreeNode Text="N2" Value="N2" Expanded="true">
                                                                        <Nodes>
                                                                            <telerik:RadTreeNode Text="N2" Value="21">
                                                                            </telerik:RadTreeNode>
                                                                            <telerik:RadTreeNode Text="N2" Value="22">
                                                                            </telerik:RadTreeNode>
                                                                            <telerik:RadTreeNode Text="N2" Value="23">
                                                                            </telerik:RadTreeNode>
                                                                            <telerik:RadTreeNode Text="N2" Value="24">
                                                                            </telerik:RadTreeNode>
                                                                        </Nodes>
                                                                    </telerik:RadTreeNode>
                                                                </Nodes>
                                                            </telerik:RadTreeView>
                                                        </div>
                                                    </ItemTemplate>
                                                    <Items>
                                                        <telerik:RadComboBoxItem />
                                                    </Items>
                                                </telerik:RadComboBox>
                                            </div>
                                        </ContentTemplate>
                                    </telerik:RadDock>
                                    <telerik:RadDock ID="RadDock2" runat="server" Title="Rad Dock 2" CssClass="divPadding"
                                        Height="300px" EnableAnimation="true" DefaultCommands="ExpandCollapse">
                                        <ContentTemplate>
                                            <div>
                                                <div>
                                                    <b>The below buttons raises ajax requests</b></div>
                                                <div>
                                                    <asp:LinkButton ID="btnThree" runat="server" Text="Click" />
                                                </div>
                                                <div>
                                                    <asp:LinkButton ID="btnFour" runat="server" Text="Click" />
                                                </div>
                                                <div>
                                                    <b class="divPadding error">This combo box posts back the page</b>
                                                    <telerik:RadComboBox ID="drpShippingAddress" Width="140px" DropDownWidth="230px"
                                                        AllowCustomText="true" EmptyMessage="Please Select" runat="server">
                                                        <ItemTemplate>
                                                            <div>
                                                                <telerik:RadTreeView ID="radTreeView2" runat="server" CollapseAnimation-Type="None"
                                                                    Height="240px" OnNodeClick="On_TreeView2NodeClick" Skin="Vista" ExpandAnimation-Type="None">
                                                                    <Nodes>
                                                                        <telerik:RadTreeNode Text="N1" Value="N1" Expanded="true">
                                                                            <Nodes>
                                                                                <telerik:RadTreeNode Text="N1" Value="11">
                                                                                </telerik:RadTreeNode>
                                                                                <telerik:RadTreeNode Text="N1" Value="12">
                                                                                </telerik:RadTreeNode>
                                                                                <telerik:RadTreeNode Text="N1" Value="13">
                                                                                </telerik:RadTreeNode>
                                                                                <telerik:RadTreeNode Text="N1" Value="14">
                                                                                </telerik:RadTreeNode>
                                                                            </Nodes>
                                                                        </telerik:RadTreeNode>
                                                                        <telerik:RadTreeNode Text="N2" Value="N2" Expanded="true">
                                                                            <Nodes>
                                                                                <telerik:RadTreeNode Text="N2" Value="21">
                                                                                </telerik:RadTreeNode>
                                                                                <telerik:RadTreeNode Text="N2" Value="22">
                                                                                </telerik:RadTreeNode>
                                                                                <telerik:RadTreeNode Text="N2" Value="23">
                                                                                </telerik:RadTreeNode>
                                                                                <telerik:RadTreeNode Text="N2" Value="24">
                                                                                </telerik:RadTreeNode>
                                                                            </Nodes>
                                                                        </telerik:RadTreeNode>
                                                                    </Nodes>
                                                                </telerik:RadTreeView>
                                                            </div>
                                                        </ItemTemplate>
                                                        <Items>
                                                            <telerik:RadComboBoxItem />
                                                        </Items>
                                                    </telerik:RadComboBox>
                                                </div>
                                            </div>
                                        </ContentTemplate>
                                    </telerik:RadDock>
                                </telerik:RadDockZone>
                            </telerik:RadDockLayout>
                        </td>
                    </tr>
                </table>
            </div>
        </telerik:RadAjaxPanel>

The Code Behind:

public partial class RadAjaxPanelIssue : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void dropDownTest_SelectedIndexChanged(object sender, EventArgs e)
        {
            Thread.Sleep(4000);
        }

        protected void On_TreeView1NodeClick(object sender, RadTreeNodeEventArgs e)
        {
            Thread.Sleep(4000);
        }

        protected void On_TreeView2NodeClick(object sender, RadTreeNodeEventArgs e)
        {
            Thread.Sleep(4000);
        }

        protected void btn_Click(object sender, EventArgs e)
        {
            Thread.Sleep(4000);
        }

    }

Thanks,
Nanda

[Pavlina]

Hi Nanda,

We were able to reproduce the problem you are facing, but we will need some additional time to examine it and we will write back to you as soon as we have some additional useful information.

Thank you in advance for your patience and understanding!

Sincerely yours,
Pavlina
the Telerik team

[Pavlina]

Hi Nanda,

I followed your scenario and prepared a simple working project which handles the desired functionality. Please give it a try and let me know if it works as expected.

I hope this helps.

Sincerely yours,
Pavlina
the Telerik team