Click here to Skip to main content
12,755,986 members (37,139 online)
Click here to Skip to main content
Add your own
alternative version


58 bookmarked
Posted 28 Sep 2008


, 28 Sep 2008 LGPL3
Rate this:
Please Sign up or sign in to vote.
An ASP.NET Webcontrol used to show hierarchy data in grid view


The TB.TreeGrid is an ASP.NET Webcontrol used to show hierarchy data in grid view.

Usually, we use GridView Webcontrol to show hierarchy data, but it has only one column. It is not suitable for BOM or schedule plan, etc.

This control combines the advantages of GridView and TreeView, can show hierarchy data in multiple columns. It supports databind, postback, callback, Microsoft Ajax, Event (Edit, Select, Expand, Populate, Collapse, Remove, Update, Cancel, etc).

Please go here to download the latest source and demo.


Using the Code

It has similar syntax to TreeView and GridView.

First, add TB.Web.UI.TreeGrid.dll as reference, you can find it in the bin directory.

Second, create a *.aspx file, add the control to the page.

 <tbwc:treegrid ID="TreeGrid" runat="server" ShowHeader="true" 
    ShowFooter ="false" Caption="This is TreeGird's Caption" 
    ExpandDepth="1" PopulateNodesFromClient="false"
    CaptionAlign="Left" NodeWrap="false" LineImagesFolder="~/TreeViewLines" 
    ShowLines="true" CssClass="tgDefault" ImageSet="XPFileExplorer" 
    NodeCellPosition="1" OnSelectedNodeChanged="TreeGrid_SelectedNodeChanged" 
    OnNodePopulate="TreeGrid_NodePopulate" OnRowCommand="TreeGrid_RowCommand" 
    onNodeDataBound="TreeGrid_NodeDataBound" >
<HeaderStyle BackColor="Gainsboro" />
<NodeStyle Display="Inline" />
    <asp:TemplateField HeaderText="FirstColumn">
        <itemtemplate><%# Eval("C1") %></itemtemplate>
        <ItemStyle Width="100px" />
    <asp:TemplateField HeaderText="???">
        <itemtemplate><%# Eval("C2") %></itemtemplate>
        <ItemStyle Width="200px" />
        <asp:TemplateField HeaderText="???">
        <itemtemplate><%# Eval("C3")  %></itemtemplate>
        <ItemStyle Width="100px" />
    <asp:TemplateField HeaderText="???">
        <itemtemplate><asp:Literal ID="LtrForth" Text='<%# Eval("C4")  %>' 
        <ItemStyle Width="100px" />
    <asp:TemplateField HeaderText="???">
        <itemtemplate><%# Eval("C5") %></itemtemplate>
        <ItemStyle Width="60px" />
    <asp:TemplateField HeaderText="???">
        <itemtemplate><%# Eval("C6") %></itemtemplate>
        <edititemtemplate><asp:TextBox ID="TxtSixth" Text='<%# Eval("C6") %>' 
    runat="server" Width="60px" Height="12px">
        <ItemStyle Width="100px" />
    <asp:TemplateField HeaderText="???">
    <itemstyle cssclass="listOp" />
        <asp:ImageButton ID="LbtnEdit" runat="server" CommandName="Edit" 
            ToolTip="??" ImageUrl="img/opEdit.gif"></asp:ImageButton>
        <asp:LinkButton ID="LbtnUpdate" runat="server" CommandName="Update" 
        <asp:LinkButton ID="LbtnCancle" runat="server" CommandName="Cancel" 
        <asp:ImageButton ID="LbtnDel" runat="server" CommandName="Remove" 
            ToolTip="??" ImageUrl="img/opDel.gif"></asp:ImageButton>

Third, open *.cs file, write databind code and event handler.

protected void Page_Load(object sender, EventArgs e)
	if (!Page.IsPostBack)

protected void TreeGrid_SelectedNodeChanged
	(object sender, TB.Web.UI.WebControls.TreeGridNodeEventArgs e)

protected void TreeGrid_RowCommand
	(object sender, TB.Web.UI.WebControls.TreeGridRowCommandEventArgs e)
	this.LblHint.Text = "?????[Event Name:" +  e.CommandName+ "] " + 
	if (e.CommandName == "Edit")
		// previous EditingNode
		TreeGridNode oNode = this.TreeGrid.EditingNode; 

		// set current EditingNode
		// cancel previous EditingNode
		if (oNode != null)                            
			oNode.DataItem = Builder.GetNodeData(oNode.Value);
		// bind data
		e.Row.Owner.DataItem = Builder.GetNodeData(e.Row.Owner.Value);  

	if (e.CommandName == "Update")
		e.Row.Owner.Editing = false;
		string newValue = ((TextBox)e.Row.FindControl("TxtSixth")).Text;
		// save .....
		e.Row.Owner.DataItem = Builder.GetNodeData(e.Row.Owner.Value);
		((Foo)e.Row.Owner.DataItem).C6 = newValue;      // for demo
	if (e.CommandName == "Cancel")
		e.Row.Owner.Editing = false;
		e.Row.Owner.DataItem = Builder.GetNodeData(e.Row.Owner.Value);
	if (e.CommandName == "Remove")
		if (e.Row.Owner.Parent != null)

protected void TreeGrid_NodePopulate
	(object sender, TB.Web.UI.WebControls.TreeGridNodeEventArgs e)
	TreeGridNode node = new TreeGridNode("new1");
	node.DataItem = Builder.GetNodeData("-1");
	node.PopulateOnDemand = true;
	node = new TreeGridNode("new2");
	node.DataItem = Builder.GetNodeData("-1");
	node.PopulateOnDemand = true;

protected void TreeGrid_NodeDataBound(object sender, TreeGridRowEventArgs e)
	if (e.Row.RowType == DataControlRowType.DataRow)
		if (e.Row.RowState == DataControlRowState.Edit)
		        ((LinkButton)e.Row.FindControl("LbtnUpdate")).Visible = true;
		        ((LinkButton)e.Row.FindControl("LbtnCancle")).Visible = true;
		if (e.Row.RowState == DataControlRowState.Normal)
		        ((LinkButton)e.Row.FindControl("LbtnUpdate")).Visible = false;
		        ((LinkButton)e.Row.FindControl("LbtnCancle")).Visible = false;

Above is a simple introduction, I will update it shortly.

You can download the and run it. The project is a Visual Studio 2008 project.


  • 29th September, 2008: Initial post


This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


About the Author

China China
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionUnable to set property 'display' of undefined or null reference Pin
lalitjoshilalit10-Sep-14 1:33
memberlalitjoshilalit10-Sep-14 1:33 
Questionunable to expand past 2nd level node Pin
Robert Glassett20-May-13 12:15
memberRobert Glassett20-May-13 12:15 is undefined in firebug and also cant collapse a node in firefox Pin
deni_syahreza30-Mar-13 1:27
memberdeni_syahreza30-Mar-13 1:27 
GeneralMy vote of 5 Pin
Prakash Kalakoti20-Jun-12 23:23
memberPrakash Kalakoti20-Jun-12 23:23 
QuestionHow pagging in tb.treeview? Pin
suco_20047-Apr-11 19:06
membersuco_20047-Apr-11 19:06 
QuestionNodeCell issue [modified] Pin
irene kuan12-Jan-11 17:46
memberirene kuan12-Jan-11 17:46 is undefined on firefox 3.5.13 when collapsing the node. Pin
yousaf2k5-Oct-10 1:36
memberyousaf2k5-Oct-10 1:36 
GeneralRe: is undefined on firefox 3.5.13 when collapsing the node. Pin
lalitjoshilalit10-Sep-14 1:40
memberlalitjoshilalit10-Sep-14 1:40 
GeneralComplete Source Code of The Control Pin
yousaf2k30-Aug-10 22:31
memberyousaf2k30-Aug-10 22:31 
GeneralAccess all the nodes Pin
JyothiPrajna6-Jul-10 17:28
memberJyothiPrajna6-Jul-10 17:28 
GeneralRe: Access all the nodes Pin
tylerjaques11-Nov-10 8:28
membertylerjaques11-Nov-10 8:28 
GeneralScrolling in TreeGrid Pin
JyothiPrajna30-Jun-10 18:03
memberJyothiPrajna30-Jun-10 18:03 
GeneralDatabind from a datasource for this control.. Please help Pin
JyothiPrajna29-Jun-10 8:23
memberJyothiPrajna29-Jun-10 8:23 
Generalit doesn`t work with firefox Pin
Eslam Zien8-Dec-09 4:16
memberEslam Zien8-Dec-09 4:16 
Generaldll not working in shared hosting Pin
Ranjanahere25-Nov-09 22:48
memberRanjanahere25-Nov-09 22:48 
GeneralTreeGridDemo.dll Pin
diego.palumbo25-Sep-09 0:19
memberdiego.palumbo25-Sep-09 0:19 
GeneralDoesn't work with Chrome or Firefox Pin
manasbeckham7-Sep-09 18:19
membermanasbeckham7-Sep-09 18:19 
GeneralRe: Doesn't work with Chrome or Firefox Pin
diego.palumbo25-Sep-09 0:14
memberdiego.palumbo25-Sep-09 0:14 
GeneralContext menu... Pin
diego.palumbo3-Aug-09 22:18
memberdiego.palumbo3-Aug-09 22:18 
GeneralAccess all the nodes Pin
manasbeckham3-Aug-09 4:17
membermanasbeckham3-Aug-09 4:17 
GeneralRe: Access all the nodes Pin
sherwinzhu3-Aug-09 22:30
membersherwinzhu3-Aug-09 22:30 
GeneralRe: Access all the nodes Pin
manasbeckham4-Aug-09 22:02
membermanasbeckham4-Aug-09 22:02 
GeneralRe: Access all the nodes Pin
JyothiPrajna6-Jul-10 17:25
memberJyothiPrajna6-Jul-10 17:25 
GeneralRe: Access all the nodes [Download Complete Source from here] Pin
yousaf2k30-Aug-10 22:29
memberyousaf2k30-Aug-10 22:29 
Generaldocumentation Pin
diego.palumbo3-Aug-09 1:11
memberdiego.palumbo3-Aug-09 1:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 29 Sep 2008
Article Copyright 2008 by sherwinzhu
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid