|
Rank: Advanced Member Groups: Member
Joined: 4/13/2009 Posts: 37
|
I'm having a hard time get the item click event to fire with the TreeView, but the ItemPopluate event works like a charm. I've set the RaisesServerEvent on the control to true, and I've also set the RaisesServerEvent to true on the each of the nodes (probably redundant). The postback is indeed happening, but the ItemClick event never fires. I'm not sure if this matters, but I've placed the TreeView in it's own control. Is there something I'm forgetting to do?
Thanks, Marty
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
Check whether you have AutoExpandOnClick set to false. The default value is true. When AutoExpandOnClick is set to true, clicking an item would automatically trigger populate on demand but not item click. When it is set to false, user will be able to:
1. Click the "+" on the left side of the node to expand the node (triggers populate on demand); 2. Or Click the tree node text to trigger server side item click event;
Please let us know if this works for you.
Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 4/13/2009 Posts: 37
|
I changed AutoExpandOnClick to false and the item click event works, but only for the first parent node. Does that sound right?
Thanks, Marty
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, No. That does not sound right. Please try the following code and see if it works for you. We have verified that it works fine here:
Code: HTML/ASPX
<eo:TreeView runat="server" ID="TreeView1" AutoExpandOnClick="False"
ControlSkinID="MSDN" Height="250px" onitemclick="TreeView1_ItemClick"
OnItemPopulate="TreeView1_ItemPopulate" Width="200px">
<TopGroup>
<Nodes>
<eo:TreeNode PopulateOnDemand="True"
RaisesServerEvent="True" Text="Root">
</eo:TreeNode>
</Nodes>
</TopGroup>
</eo:TreeView>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
Code: C#
protected void TreeView1_ItemClick(
object sender, EO.Web.NavigationItemEventArgs e)
{
Label1.Text = e.TreeNode.Text;
}
protected void TreeView1_ItemPopulate(
object sender, EO.Web.NavigationItemEventArgs e)
{
EO.Web.TreeNode newNode =
new EO.Web.TreeNode("New Node " + Environment.TickCount);
newNode.PopulateOnDemand = true;
e.TreeNode.ChildNodes.Add(newNode);
}
The above code creates a new node when you expand it and update Label1.Text when an item is clicked. Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 4/13/2009 Posts: 37
|
Your example works, so it must be something I'm doing on my end. Thanks!
Marty
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Thanks for the update!
|
|
Rank: Advanced Member Groups: Member
Joined: 4/13/2009 Posts: 37
|
I must be missing something. My goal is to make a treeview that looks like the Windows file explorer (directories, files, etc). My treeview looks like your treeview, except the TopGroup looks slightly different and I'm using LookNodes. Is there something wrong with the code below that would explain why the ItemClick event only fires for the root node? Ideally, I would like a postback to occur when a user clicks on a file and not a directory.
C#:
public void PopulateRootNode(Bucket aBucket) { Bucket = aBucket; this.TreeView1.Nodes.Clear();
if (Bucket != null) { DirectoryContents dc = Bucket.GetDirectoryListing("/");
EO.Web.TreeNode rootNode = new EO.Web.TreeNode(); rootNode.Text = Bucket.DisplayName; rootNode.ItemID = "/"; rootNode.PopulateOnDemand = true; rootNode.RaisesServerEvent = NullableBool.True;
//this.TreeView1.Nodes.Add(rootNode); this.TreeView1.TopGroup.Nodes.Add(rootNode);
Populate(rootNode, "/", false); } } public void Populate(EO.Web.TreeNode treeNode, string path, bool shouldRePopulate) { if (shouldRePopulate ) treeNode.ChildNodes.Clear();
EO.Web.TreeNode tn = null; DirectoryContents dc = Bucket.GetDirectoryListing(path);
// Create directories... foreach (DirectoryItem item in dc.SortedDirectories) { tn = new EO.Web.TreeNode(); tn.Text = item.Name; tn.ItemID = item.Name; // In order for Path to work. tn.PopulateOnDemand = true; // tn.RaisesServerEvent = NullableBool.True; treeNode.ChildNodes.Add(tn); }
// Create files... foreach (DirectoryItem item in dc.SortedFiles) { tn = new EO.Web.TreeNode(); tn.Text = item.Name; tn.ItemID = item.Name; // In order for Path to work. tn.LookID = "_FileNode"; tn.PopulateOnDemand = true; //tn.RaisesServerEvent = NullableBool.True; treeNode.ChildNodes.Add(tn); } }
protected void TreeView1_ItemClick(object sender, NavigationItemEventArgs e) { btnDownload.Enabled = true; // Only fires on the root node. }
protected void TreeView1_ItemPopulate(object sender, NavigationItemEventArgs e) { Populate(e.TreeNode, e.TreeNode.Path, false); }
XHTML:
<eo:TreeView ID="TreeView1" runat="server" ControlSkinID="None" Height="346px" Width="326px" onitemclick="TreeView1_ItemClick" onitempopulate="TreeView1_ItemPopulate" ScrollSpeed="6" AutoExpandOnClick="False"> <LookNodes> <eo:TreeNode CollapsedImageUrl="00030301" DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;" ExpandedImageUrl="00030302" ImageUrl="00030301" ItemID="_Default" NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none" SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> </eo:TreeNode> <eo:TreeNode CollapsedImageUrl="00101022" DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;" ExpandedImageUrl="00101022" ImageUrl="00101022" ItemID="_FileNode" NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none" SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> </eo:TreeNode> </LookNodes> <TopGroup Style-CssText="border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;"> </TopGroup> </eo:TreeView>
Thanks for your help, Marty
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, Your code looks fine to us. The only part that we are not clear about in your code is where you call PopulateRootNode. You should only call it once during the initial Page_Load and should NOT call it during the post back stage. So if you have such code:
Code: C#
Page_Load(...)
{
PopulateRootNode(...);
}
Then you will have the stated problem. The correct form should be:
Code: C#
Page_Load(...)
{
if (!Page.IsPostBack)
PopulateRootNode(...);
}
Note the "if (!Page.IsPostBack)" condition. If the problem continues, please isolate the problem into a separate test page that runs indepdently. As soon as we can run it and see the problem, we should be able to tell you exactly how to correct the problem. Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 4/13/2009 Posts: 37
|
PopulateRootNode() is only happening during the intial page load. I'm going to re-structure a few things and try to isolate the problem. I'll let you know. Thanks for your help.
MB
|
|
Rank: Advanced Member Groups: Member
Joined: 4/13/2009 Posts: 37
|
I've modified your example a tiny bit and I've included the complete code in this post. When I expand a node by clicking on the "+" symbol and then click on a file type node, the ItemClick event does not fire, and oddly, the ItemPopulate event fires (not sure why). But when I click on the same node again, the ItemPopulate event does not fire, and the ItemClick event fires. Weird. Can you reproduce this behavior? C#:
Code: C#
public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
EO.Web.TreeNode tn = new EO.Web.TreeNode("root");
tn.PopulateOnDemand = true;
tn.RaisesServerEvent = NullableBool.True;
tn.ItemID = "root";
this.TreeView1.TopGroup.Nodes.Add(tn);
}
}
protected void TreeView1_ItemClick(object sender, EO.Web.NavigationItemEventArgs e)
{
Label1.Text = "Path: " + e.TreeNode.Path;
}
protected void TreeView1_ItemPopulate(object sender, EO.Web.NavigationItemEventArgs e)
{
string nodeID;
// Create a directory.
nodeID = "Node " + Environment.TickCount;
EO.Web.TreeNode newNode = new EO.Web.TreeNode(nodeID);
newNode.PopulateOnDemand = true;
newNode.ItemID = nodeID;
e.TreeNode.ChildNodes.Add(newNode);
// Create a file.
nodeID = "Node " + Environment.TickCount;
newNode = new EO.Web.TreeNode(nodeID);
newNode.ItemID = nodeID;
newNode.LookID = "_FileNode";
e.TreeNode.ChildNodes.Add(newNode);
}
}
XHTML:
Code: HTML/ASPX
<eo:TreeView runat="server" ID="TreeView1" AutoExpandOnClick="false"
ControlSkinID="None" Height="330px" onitemclick="TreeView1_ItemClick"
OnItemPopulate="TreeView1_ItemPopulate" Width="318px">
<LookNodes>
<eo:TreeNode CollapsedImageUrl="00030301"
DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;"
ExpandedImageUrl="00030302" ImageUrl="00030301" ItemID="_Default"
NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none"
SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;">
</eo:TreeNode>
<eo:TreeNode CollapsedImageUrl="00101022"
DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;"
ExpandedImageUrl="00101022" ImageUrl="00101022" ItemID="_FileNode"
NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none"
SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;">
</eo:TreeNode>
</LookNodes>
<TopGroup Style-CssText="border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;">
</TopGroup>
</eo:TreeView>
Thanks, Marty
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
We are able to reproduce the problem. We will look into it and see if we can find the root cause and let you know as soon as we find anything.
Thanks!
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, We looked into your code. The issue is caused by following code:
Code: C#
nodeID = "Node " + Environment.TickCount;
newNode.ItemID = nodeID;
To improve performance, the TreeView does not store dynamically populated tree nodes in view state, rather it recreate them by calling ItemPopuplate again when the page posts back. So the sequence of events is: 1. User expand root node; 2. ItemPopulate is called, this creates child node X; 3. User clicks child node X; 4. Page posts back. It calls ItemPopulate event again to recreate child node X; 5. TreeView tries to identify the node that was clicked and trigger ItemClick event; Step 5 relies on ItemID to identify which node was clicked. In your code, since node X created on step 2 and step 4 have different IDs, step 5 fails to find a match. Thus it is unable to trigger ItemClick event. To resolve the issue, make sure a node's ItemID stays the same. For example, if you are building a file browser, you can use the file name as ItemID; If you are building the TreeView from database, you can use record ID as ItemID. You can also leave ItemID blank so that an automatically created internal ID (based on item index) will be used. Hope this helps. Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 4/13/2009 Posts: 37
|
You're right! I've changed the code a bit and it works great. Thanks for your great support. Marty
Code: C#
public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
EO.Web.TreeNode tn = new EO.Web.TreeNode("root");
tn.PopulateOnDemand = true;
tn.RaisesServerEvent = NullableBool.True;
tn.ItemID = "root";
this.TreeView1.TopGroup.Nodes.Add(tn);
}
}
protected void TreeView1_ItemClick(object sender, EO.Web.NavigationItemEventArgs e)
{
Label1.Text = "Path: " + e.TreeNode.Path;
}
protected void TreeView1_ItemPopulate(object sender, EO.Web.NavigationItemEventArgs e)
{
// Create a directories...
foreach (string s in CreateDir(e.TreeNode.ItemID))
{
EO.Web.TreeNode newNode = new EO.Web.TreeNode(s);
newNode.ItemID = s;
newNode.PopulateOnDemand = true;
e.TreeNode.ChildNodes.Add(newNode);
}
// Create a files...
foreach (string s in CreateFiles(e.TreeNode.ItemID))
{
EO.Web.TreeNode newNode = new EO.Web.TreeNode(s);
newNode.ItemID = s;
newNode.PopulateOnDemand = false;
newNode.LookID = "_FileNode";
e.TreeNode.ChildNodes.Add(newNode);
}
}
private List<string> CreateDir(string dirName)
{
List<string> retval = new List<string>();
switch (dirName)
{
case "root":
retval.Add("Directory 1");
break;
case "Directory 1":
retval.Add("Directory 2");
break;
case "Directory 2":
retval.Add( "Directory 3" );
break;
case "Directory 3":
retval.Add("Directory 4");
break;
}
return retval;
}
private List<string> CreateFiles(string dirName)
{
List<string> retval = new List<string>();
switch (dirName)
{
case "root":
retval.Add("File 1 ");
break;
case "Directory 1":
retval.Add("File 2");
break;
case "Directory 2":
retval.Add("File 3");
break;
case "Directory 3":
retval.Add("File 4");
break;
}
return retval;
}
}
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Cool. Glad it's working for you!
|
|