Monday, March 26, 2012

Treeview is slow to respond when a node is selected

I am working on an application that is using the TreeView.

Theway it's functions is the tree displays all the available families offunds. When the node is expanded, it shows the funds for thatparticular family (PopulateOnDemand is set to true). When the fund isclicked, it's added to a checkbox list. It's working, but when the fundis getting added to the checkbox list it's very, very slow. I'd like to get rid of the lag, because it's pretty unusable at this state

I am posing my code, and i hope someone can help me

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Copy of Default.aspx.cs"
Inherits="_Default" %
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="Local_Resources/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<table>
<tr>
<td valign="top">
<cc1:TabContainer ID="TabContainer1" runat="server" Width="460px" Height="400px" ScrollBars="Auto">
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Browse Funds">
<ContentTemplate>
<asp:UpdatePanel runat="server" UpdateMode="conditional" ID="tvUpdatePanel">
<ContentTemplate>
<asp:TreeView ID="TreeView1" OnTreeNodePopulate="PopulateNode" OnSelectedNodeChanged="SelectNode" ExpandDepth="0" runat="server">
<Nodes>
<asp:TreeNode Text="root" SelectAction="Expand" PopulateOnDemand="true" />
</Nodes>
</asp:TreeView>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</td>
<td valign="top">
<asp:UpdatePanel runat="server" ID="upResult" UpdateMode="Always">
<ContentTemplate>
<div class="checkboxListWrapper">
<asp:CheckBoxList ID="cblResults" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partialclass _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

}
}

protected void PopulateNode(object source, TreeNodeEventArgs e)
{
switch (e.Node.Depth)
{
case 0:
GetFundFamilies(e.Node);
break;
case 1:
GetFundsByFamily(e.Node);
break;
}
}
protected void GetFundFamilies(TreeNode node)
{
foreach (DataRow drin DAL.getAllFundFamilies().Tables[0].Rows)
{
TreeNode tempNode =new TreeNode(dr[1].ToString(), dr[0].ToString());
tempNode.SelectAction = TreeNodeSelectAction.Expand;
tempNode.PopulateOnDemand =true;
node.ChildNodes.Add(tempNode);
}
}
protected void GetFundsByFamily(TreeNode node)
{
foreach (DataRow drin DAL.getFundsByFamily(node.Value.ToString()).Tables[0].Rows)
{
TreeNode tempNode =new TreeNode(dr[1].ToString(), dr[0].ToString());
node.ChildNodes.Add(tempNode);
}
}
protected void SelectNode(object sender, EventArgs e)
{
TreeView tv = (TreeView)sender;
ListItem li =new ListItem(tv.SelectedNode.Text, tv.SelectedNode.Value);
cblResults.Items.Add(li);

}

}

TreeViews are supported in update panels. You can kind of use them, BUT you will get errors if you try to change a treeview after the initial pageload. If it doesn't change, you should be able to use a treeview inside an update panel without errors. Menus and report viewers are also not supported.

Well, that doesn't answer my question. My tree works just fine. It's just very slow.

When doing some testing i found that when i click on a node, it looks like the entire tree reloads. I don't think i have that problem when i am not using the UpdatePanel, but that defeats the purpose.


Well, that doesn't answer my question. My tree works just fine. It's just very slow.

When doing some testing i found that when i click on a node, it looks like the entire tree reloads. I don't think i have that problem when i am not using the UpdatePanel, but that defeats the purpose.


My point was that you CAN'T get Ajax functionality with the built in Treeview. If you want that, you need a 3rd party control.

in that case i am confused

if it would work, it would just not work. My problem is that it IS working. I just need it to be faster.

I am guessing you mean it doesn't support asynchronous postback? But i can the child nodes to populate on demand without a page reload. If i can't get the tree to work, i can just adapt a GridView for my purposes, or just write a custom control. I don't need too much functionality.


You would probably want to adapt the gridview then. Since the Beta releases, treeviews haven't worked well, if at all when you try to do anything dynamic with them after the initial page load. Before the betas, there was a way to do this, but there were big changes that changed that. We spent a lot of time trying to get it to load dynamically when we were switching our site from the July CTP to releases after that.

that's what i am trying to do right now actually

even with a gridview it's tricky and i ran into the same problem of the whole grid expanding when a node is clicked

i guess i need to add multiple update panels to make it work

No comments:

Post a Comment