Menu
I am trying to create a treeview dynamically using c# and asp.net.
I have created a lazy load treeview using the populate ondemand attribute.
> <asp:TreeView ID="treeView1" runat="server"
> OnTreeNodePopulate="treeview1_TreeNodePopulate"></asp:TreeView>
Behind code I have loaded my data but initially I populate the parent nodes. What I want to achieve is when i click on parent node I then do a postback and then populate its child and then again populate its child's and so now. I have thousands of data so i dont want all data to be populated due to performance. So thats the reason why I only want to populate the node childs based on selected node. See example below:
>Peter
- - >user1
- - >user2
- - >user3
- - >userPassword
- - >userId
>john
>david
>Jack
- - >user1
- - >user2
- - >userpassword
- - >userId
- - >Permissions
>Laura
- - > admin
- - > permissions
-- > user1
-- > user2
- - >userpassword
- - >userId
- - >Permissions
>...
>...
>...
As you can see there can be multiple parent nodes and multiple layers. These will be populated dynically based on what i pass in to DB. Everytime i click on node it will expand the node and populate its child using postback and then when you click on its child again it will do a postback and populate its child again etc. So i wanted help on how to create a dynamic treeview.
c# :
private void LoadTreeview()
{
//Load data
// Get data from DB.
//loop through the list and build its parent nodes.
foreach (var dxm in list)
{
TreeNode tnParent = CheckNodeExist(dxm.Node); //I check to see if exists.
if (tnParent== null)
{
TreeNode tn = new TreeNode();
tn.Text = dxm.Node;
tn.Value = dxm.Id.ToString();
tn.SelectAction = TreeNodeSelectAction.None;
tn.Collapse();
treeView1.Nodes.Add(tn);
tn.PopulateOnDemand = true; //lazy load
tnParent= tn;
}
}
This method above is called on page load.
On TreeNodePopulateEvent: (when a node is clicked on)
protected void treeview1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
ICollection<ITEMS> list = new Collection<ITEMS>();
list = GetData(e.Node.Text); //pass in the node you have selected this will go and check in DB if the node does have any child nodes. If so will return with child nodes.
foreach (var dxm in list)
{
TreeNode tnChild = CheckNodeExist(dxm.Node);
if (tnChild == null)
{
TreeNode tn = new TreeNode();
tn.Text = dxm.Node;
tn.Value = dxm.Id.ToString();
tn.SelectAction = TreeNodeSelectAction.None;
tn.Collapse();
tn.PopulateOnDemand = true;
tnChild = tn;
tnChild.ChildNodes.Add(tnChild);
}
}
}
556
Children. Add(child) (in the for block). You just create the child node, but you don't do anything with it for it to have any relation with the TreeView or with the mainNode.
The TreeView control contains a hierarchy of TreeViewItem controls. It provides a way to display information in a hierarchical structure by using collapsible nodes . The top level in a tree view are root nodes that can be expanded or collapsed if the nodes have child nodes.
I believe you are looking for the SelectedNodeChanged event. You should be able to load your child nodes in this event. Basically this event will be fired everytime you select a node by clicking on it.
Your aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div id="div1" runat="server">
</div>
<asp:TreeView ID="TreeView1" runat="server"
onselectednodechanged="TreeView1_SelectedNodeChanged">
</asp:TreeView>
</form>
</body>
</html>
Your codebehind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
TreeView1.Nodes.Add(new TreeNode("Node1"));
TreeView1.Nodes[0].ChildNodes.Add(new TreeNode("ChildNode"));
}
}
protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
Response.Write(TreeView1.SelectedNode.Text);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
