asked on

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

Scarvaci

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.

Miguel Oz

ASKER

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.

lazyberezovsky

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"

Scarvaci

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.

Miguel Oz

ASKER

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)

ASKER CERTIFIED SOLUTION

Scarvaci

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Miguel Oz

ASKER

It does not explain why obout is better than jQuery alternative.
i will go with my original solution (obout treeview)