• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2263
  • Last Modified:

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

0
Miguel Oz
Asked:
Miguel Oz
  • 3
  • 3
1 Solution
 
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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now