How to avoid whole page postback when click the node of treeview in ComboBox

[Wenlong Yi]

Code in aspx:

<asp:UpdatePanel ID="upComboBox" runat="server">
                <ContentTemplate>
                    <telerik:RadComboBox ID="rcb" runat="server" SkinID="Larger" Height="200px">
                        <ItemTemplate>
                            <telerik:RadTreeView ID="rtv" runat="server" OnNodeClick="rtv_NodeClick"
                                CausesValidation="false">
                            </telerik:RadTreeView>
                        </ItemTemplate>
                        <Items>
                            <telerik:RadComboBoxItem Selected="true" />
                        </Items>
                    </telerik:RadComboBox>
                </ContentTemplate>
</asp:UpdatePanel>

  Code in aspx.cs

 protected void rtv_NodeClick(object sender, RadTreeNodeEventArgs e)
 {
     rcb.Items[0].Value = e.Node.Value;
     rcb.Items[0].Text = e.Node.Text;
 }

This method won't stop whole page postback when you trigger the rtv_NodeClick event

There somebody said, should put the updatepanel inside ComboBox like follows

  <telerik:RadComboBox ID="rcbConsigned" runat="server" SkinID="Larger" Height="200px">
                        <ItemTemplate>
                            <asp:UpdatePanel ID="up" runat="server">
                                <ContentTemplate>
                                    <telerik:RadTreeView ID="rtvSubcon" runat="server" OnNodeClick="rtvSubcon_NodeClick"
                                        CausesValidation="false">
                                    </telerik:RadTreeView>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </ItemTemplate>
                        <Items>
                            <telerik:RadComboBoxItem Selected="true" />
                        </Items>
                    </telerik:RadComboBox>

This method can stop the whole page postback, but as ajax method, it won't change the value of radcombox.

As we were told ms-help://telerik.aspnetajax.radcontrols.2009.Q1/telerik.aspnetajax.radajax.2009.Q1/3rdparty.html

Controls that Are Not Compatible with RadAjaxManager Control

The following ASP.NET controls are not compatible with partial-page updates, and are therefore not supported as initiating or updated controls:

• TreeView and Menu controls.

• Web Parts controls. For more information, see ASP.NET Web Parts Controls.

• FileUpload controls when they are used to upload files as part of an asynchronous postback.

• GridView and DetailsView controls when their EnableSortingAndPagingCallbacks property is set to true. The default is false.

• Login, PasswordRecovery, ChangePassword, and CreateUserWizard controls whose contents have not been converted to editable templates.

• The Substitution control.

 

[Atanas Korchev]

Hi Wenlong Yi,

The treeview mentioned in this help article is the built-in TreeView control not RadTreeView. The latter fully supports ASP.NET Ajax - UpdatePanel and RadAjaxManager. I recommend you try RadAjaxManager and ajaxify the treeview control.

Regards,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Wenlong Yi]

RadAjaxManager may help, but it still meet problem
I add an RadAjaxManager  instance at the page

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

        </telerik:RadAjaxManager>

Code behind page

  protected void Page_Load(object sender, EventArgs e)
        {
            RadTreeView rtv = rcb.Items[0].FindControl("rtv") as RadTreeView;

            ram.AjaxSettings.Clear();
            ram.AjaxSettings.AddAjaxSetting(rtv, rcb,null);
}

Strange things happened

When I picker the treenode for the first time, It won't trigger whole page postback,
the second time it will trgger whole page postback
the third time it won't again.

[Helen]

Hello Wenlong Yi,

Here is a sample code how to achieve this:

    <script type="text/javascript">
        function attachCombo(sender, eventrgs) {
            var combo = $find("rcb");
            combo.attachDropDown();
        }


    </script>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadAjaxManager ID="ram" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rcb">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rcb" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadComboBox ID="rcb" runat="server" SkinID="Larger" Height="200px">
        <ItemTemplate>
            <telerik:RadTreeView ID="rtv" runat="server" OnNodeClick="rtv_NodeClick" CausesValidation="False"
                OnClientNodeClicking="attachCombo">
                <Nodes>
                    <telerik:RadTreeNode Text="Node1">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Node2">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Node3">
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeView>
        </ItemTemplate>
        <Items>
            <telerik:RadComboBoxItem Selected="true" />
        </Items>
    </telerik:RadComboBox>

Regards,
Helen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[neemaa]

Hi,

I am also trying to prevent my rad treeview from doing postbacks , and the suggested solution is not working for me. I have a RadTreeView which is placed inside a RadPane, which is inside a RadSplitter. I tried:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadSplitter1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Treeview1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

 

... and it didn't work -- I still encounter postbacks. I also tried setting the ControlID to that of the RadPane (which contains the treeview), but then I got the following error: SplitterItemsCollection must contain SplitterItem objects  .

 

By the way, I am creating my treeview programatically and have set the expand mode of all nodes to ClientSide.

 

Any hints or suggestions?

 

Thanks

[Simon]

Hi Peyman Peyghambarzadeh,

If you want to AJAXify the TreeView you need to set it as the Ajax Control instead of the Ajax Updated Controls, i.e.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Treeview1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="[ControlToUpdateId]" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Kind regards,
Simon
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[neemaa]

Thanks for the reply, but that still didn't solve the problem.

Basically, my intention is to be able to click a node on the tree (and expand it or whatever) without the tree triggering a postback.

If i set the AjaxControlID to Treeview1 (which implies that Treeview1 is the element initiating the update) then what is the element being updated? Will that also be Treeview1? Then, If I do this ...:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Treeview1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Treeview1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

... I will get the following error during debug upon clicking a tree node: Microsoft JScript runtime error: 'get_postBackElement().id' is null or not an object.

Thanks

[Simon]

Hello Peyman Peyghambarzadeh,

Thank you for clarifying.

You cannot disable the postback once you handle the server-side NodeClick event.

Perhaps you can achieve your requirement in another way.

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

[govind]

Hi,

Can you please let me know the other way by which i can click on the treenode and update the other RAD pane without doing the postback.


Regards,
Govind.

[Simon]

Hi govind,

Can you please describe your setup and requirement in more detail?

Kind regards,
Simon
the Telerik team