ASP.NET treeview How can I avoid a postback to server when populating child nodes?

I am trying to test populate on demand for a treeview. I follow the procedure from these links: http://msdn.microsoft.com/en-us/library/e8z5184w.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.treenode.populateondemand.aspx

But the treeview still make a postback to the server if I expanded one of the tree nodes (If you put a breakpoint in the first line of Page_load event), thus refreshing the whole page. I am using VS2005 and Asp.net 2.0 (but the same issue occurs in VS2008)

My simple test page markup and code behind are attached.

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="aspTreeview.aspx.cs" Inherits="aspTreeview" %> 
 
<!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"> 
    <div> 
        <table> 
            <tr> 
                <td style="height: 80%; width: 45%;"> 
                    <asp:Panel ID="Panel1" runat="server" BorderColor="#0033CC" BorderStyle="Solid" ScrollBars="Both"> 
                        <asp:TreeView ID="TreeView1" runat="server" ShowLines="True" PopulateNodesFromClient="True" EnableClientScript="True" NodeWrap="True"  
                            ontreenodepopulate="TreeView1_TreeNodePopulate" ExpandDepth="0"> 
                        </asp:TreeView> 
                    </asp:Panel> 
                </td> 
                <td style="width: 10%; height: 80%;" > 
                    <div> 
                    <asp:Button ID="Button1" runat="server" Text="->" onclick="Button1_Click" /> 
                    </div> 
                    <div> 
                    <asp:Button ID="Button2" runat="server" Text="<-" /> 
                    </div> 
                </td> 
                <td style="width: 136px; height: 80%"> 
                    <asp:Panel ID="Panel2" runat="server" BorderColor="Lime" BorderStyle="Solid"> 
                        <asp:TreeView ID="TreeView2" runat="server" ShowLines="True" ExpandDepth="0"> 
                        </asp:TreeView> 
                    </asp:Panel> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                </td> 
                <td> 
                </td> 
                <td style="width: 136px"> 
                </td> 
            </tr> 
        </table> 
    </div> 
    </form> 
</body> 
</html> 

//The code behind is:
    protected void Page_Load(object sender, EventArgs e)
    {
        Debug.WriteLine("Page_Load started.");
        if (!IsPostBack)
        {
            if (Request.Browser.SupportsCallback)
                Debug.WriteLine("Browser supports callback scripts.");
            for (int i = 0; i < 3; i++)
            {
                TreeNode node = new TreeNode("ENTRY " + i.ToString());
                node.Value = i.ToString();
                node.PopulateOnDemand = true;
                node.Expanded = false;
                TreeView1.Nodes.Add(node);
            }
        }
        Debug.WriteLine("Page_Load finished.");
    }

    protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
    {
        TreeNode targetNode = e.Node;
        for (int j = 0; j < 4200; j++)
        {
            TreeNode subnode = new TreeNode(String.Format("Sub ENTRY {0} {1}", targetNode.Value, j));
            subnode.PopulateOnDemand = true;
            subnode.Expanded = false;
            targetNode.ChildNodes.Add(subnode);
        }
    }

Open in new window

LVL 37
Miguel OzSoftware EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ScarvaciCommented:
Hi mas_oz2003,

I'm still confuse about your question.

You don't want to fresh the whole page and just this small section?

Try use asp:UpdatePanel to allow small section to call TreeView1_TreeNodePopulate method on server.

S.
0
Miguel OzSoftware EngineerAuthor Commented:
Need to load the child nodes without loading the whole page or the root nodes.
Something similar to: (click on the nodes)
http://www.obout.com/t2/eMSDN_DL_deep.aspx

Unfortunately is a bit late in the development cycle to use obout.
0
lazyberezovskyCommented:
Tree view works as it should to. You have lazy-load of child nodes, but you have to add them on server side anyway. So, you need to use AJAX (to prevent whole page refreshing) or leave it with postbacks.

See: http://www.codegod.de/WebAppCodeGod/TreeView-ASP-NET-Populate-OnDemand-AID409.aspx
"Using this built-in feature of the TreeView-control brings an Ajax-feeling to your Website"
0
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

ScarvaciCommented:
I agree with lazyberezovsky, AJAX is better choice.

Here the other link that may help you.
http://codeclimber.net.nz/archive/2007/06/28/Ajax-TreeView.aspx

S.
0
Miguel OzSoftware EngineerAuthor Commented:
lazyberezovsky:
If you compare the code posted on your link and mine, the difference is that they are not checking what is happening with Page_Load.
ScarvaciDate:
I checked your link before posting my question. Is this treeview offers a better solution/support than the obout treeview (See my previous comment)?

Basically I need it load the child nodes in the client. I will use js to get the selected node. (My number of nodes can vary from 6 to 10,000, thus having to reload the treeview is a show stopper). My ideal solution will be to have js to extend asp.net treeview to handle it as obout treeview if that functionality is not supported natively. (I may need to create a hidden asp.net page to handle some of the server calls)
0
ScarvaciCommented:
I'll prefer use obout treeview for dynamic treeview (changing nodes etc).  

But for static treeview which mean just dump all nodes from server to client side and no postback to avoid changing nodes while on same page.  I’ll using JQuery (or JS) to display treeview.

JQuery can use ul html to show/hide just like treeview. Here the example http://docs.jquery.com/Plugins/Treeview/treeview
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Miguel OzSoftware EngineerAuthor Commented:
It does not explain why obout is better than jQuery alternative.
i will go with my original solution (obout treeview)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.