I create a web form to display directory structure of the disks of the server. I put a treeview on the form and fill it with the drive and directory names. Everything was fine until I put a UpdatePanel (and ScriptManager ofcourse) on the form and move the TreeView into it. Now, I have a problem with the first node of the treeview (C:\). When I expand that node I see all the directories in the root of the C: drive. But when I expand any directory, all the nodes collapses. Than, other root nodes (D:, E: etc) works properly, but C: is not. What is the thing I miss? I use Visual Studio 2005 and AJAX January CTP. My code is as follows;
protectedvoid Page_Load(object sender,EventArgs e)
{
string[] drives;int i;TreeNode node, initialChildNode;DriveInfo driveInfo;if (!Page.IsPostBack)
{
tvFileSystem.Nodes.Clear();
drives =
Environment.GetLogicalDrives();for (i = 0; i < drives.Length; i++)
{
node =
newTreeNode();
driveInfo =
newDriveInfo(drives[i]);try
{
node.Text = driveInfo.VolumeLabel +
"(" + drives[i] +")";
}
catch
{
node.Text = driveInfo.DriveType +
"(" + drives[i] +")";
}
node.Value = drives[i];
initialChildNode =
newTreeNode();
initialChildNode.Text =
".";
initialChildNode.Value =
".";
node.ChildNodes.Add(initialChildNode);
tvFileSystem.Nodes.Add(node);
node.Collapse();
}
tvFileSystem.CollapseAll();
}
}
protectedvoid tvFileSystem_TreeNodeExpanded(object sender,TreeNodeEventArgs e)
{
TreeNode node = e.Node;TreeNode initialChildNode, newNode, tempNode;DirectoryInfo dirInfo;DirectoryInfo[] subDirInfo;string path ="";string[] subDirs;int i;string dirName, js;if (node.Value ==".")return;
tempNode = node;
while (tempNode !=null)
{
path = tempNode.Value +
"\\" + path;
tempNode = tempNode.Parent;
}
try
{
dirInfo =
newDirectoryInfo(path);
subDirInfo = dirInfo.GetDirectories();
}
catch (Exception e1)
{
js =
"<script>alert('" + e1.Message.Replace("\r","").Replace("\n","") +"');</script>";
Page.ClientScript.RegisterStartupScript(
typeof(string),"expandError", js);return;
}
node.ChildNodes.Clear();
for (i = 0; i < subDirInfo.Length; i++)
{
newNode =
newTreeNode();
dirName = subDirInfo[i].Name;
newNode.Text = dirName;
newNode.Value = dirName;
try
{
subDirs =
Directory.GetDirectories(subDirInfo[i].FullName);if (subDirs.Length > 0)
{
initialChildNode =
newTreeNode();
initialChildNode.Text =
".";
initialChildNode.Value =
".";
newNode.ChildNodes.Add(initialChildNode);
}
node.ChildNodes.Add(newNode);
}
catch { };
}
}
And the aspx file :
<%
@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="dirTree.aspx.cs"Inherits="dirTree" %>
<!
DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
htmlxmlns="http://www.w3.org/1999/xhtml">
<
headrunat="server"><title>Untitled Page</title>
</
head>
<
body><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>
</div><asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate> <asp:TreeViewID="tvFileSystem"runat="server"OnTreeNodeExpanded="tvFileSystem_TreeNodeExpanded"Style="position: static"><SelectedNodeStyleBackColor="NavajoWhite"/><NodeStyleForeColor="Black"/></asp:TreeView></ContentTemplate></asp:UpdatePanel></form>
</
body>
</
html>
From what I have read, Treeviews and Menus do not work inside UpdatePanels. I did, however, get the menu to work without posting back by keeping the menu out of the UpdatePanel, but calling the appropriate menu event from the updatepanel.
<asp:UpdatePanel runat="Server" id="upSomeUpdatePanel" UpdateMode="Conditional">
<contentTemplate>
</contentTemplate>
<Triggers>
<AutoSyncPostBackTrigger ControlID="TreeViewID" Event="treevieweventname" />
</triggers>
</asp:UpdatePanel>
Don't copy and paste my code above because I did it all by memory and some of the control parameters might have slightly different names, but I hope you get the drift. The "treevieweventname" would be the name of the event you want to do without posting back - like "TreeNodeExpanded".
Hope this helps.
I have a treeview that works fine inside of an update panel.
What I'm doing differently is I'm not using the Expanded event,I'm using the TreeNodePopulate event and setting each node thathas children's "PopulateOnDemand" property to true. MyTreeView is inside an update panel and it expands, collapses,dynamically populates, etc. just fine.
By the way, I created a thread in this forum with a working example of a TreeView in an update panel using the technique I mentioned. I used the FileSystem since it's easy and doesn't requrie a database, it isn't exactly like yours but it works. It should show up soon upon moderation. Let me know if that helps!
Thank you aaron,
Your example is very helpful for me. But, what if I want user to select a node. I need to hold the selected node value, for example in a HiddenField. I modified your example by removing "Selected.Action = TreeNodeSelectAction.None" lines. And I add SelectedNodeChanged Event which includes following code:
hdSelectedPath.Value = tvFiles.SelectedNode.Value;
Now, it works except some thing. If I selects a node, then expands another node and select another node, the selected nodes changes in a wrong way. I mean, any other node is selected which I did not select.
What is the point I miss?
Thanks.
Thank you aaron,
Your example is very helpful for me. But, what if I want user to select a node. I need to hold the selected node value, for example in a HiddenField. I modified your example by removing "Selected.Action = TreeNodeSelectAction.None" lines. And I add SelectedNodeChanged Event which includes following code:
hdSelectedPath.Value = tvFiles.SelectedNode.Value;
Now, it works except some thing. If I selects a node, then expands another node and select another node, the selected nodes changes in a wrong way. I mean, any other node is selected which I did not select.
What is the point I miss?
Thanks.
It turns out ReSharper from Jetbrains doesn't like AJAX in the current build hence it flags its properties as illegal. It builds fine but still annoying.