Click here to Skip to main content
13,248,107 members (35,389 online)
Click here to Skip to main content
Add your own
alternative version

Stats

270K views
1.9K downloads
58 bookmarked
Posted 28 Sep 2008

TB.TreeGrid

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

Introduction

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.

TreeGrid.png

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" />
<Columns>
    <asp:TemplateField HeaderText="FirstColumn">
        <itemtemplate><%# Eval("C1") %></itemtemplate>
        <ItemStyle Width="100px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="???">
        <itemtemplate><%# Eval("C2") %></itemtemplate>
        <ItemStyle Width="200px" />
    </asp:TemplateField>
        <asp:TemplateField HeaderText="???">
        <itemtemplate><%# Eval("C3")  %></itemtemplate>
        <ItemStyle Width="100px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="???">
        <itemtemplate><asp:Literal ID="LtrForth" Text='<%# Eval("C4")  %>' 

    runat="server"></asp:Literal></itemtemplate>
        <ItemStyle Width="100px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="???">
        <itemtemplate><%# Eval("C5") %></itemtemplate>
        <ItemStyle Width="60px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="???">
        <itemtemplate><%# Eval("C6") %></itemtemplate>
        <edititemtemplate><asp:TextBox ID="TxtSixth" Text='<%# Eval("C6") %>' 

    runat="server" Width="60px" Height="12px">
    </asp:TextBox></edititemtemplate>
        <ItemStyle Width="100px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="???">
    <itemstyle cssclass="listOp" />
    <itemtemplate>
        <asp:ImageButton ID="LbtnEdit" runat="server" CommandName="Edit" 

            ToolTip="??" ImageUrl="img/opEdit.gif"></asp:ImageButton>
        <asp:LinkButton ID="LbtnUpdate" runat="server" CommandName="Update" 

            Text="Update"></asp:LinkButton>
        <asp:LinkButton ID="LbtnCancle" runat="server" CommandName="Cancel" 

            Text="Cancel"></asp:LinkButton>
        <asp:ImageButton ID="LbtnDel" runat="server" CommandName="Remove" 

            ToolTip="??" ImageUrl="img/opDel.gif"></asp:ImageButton>
    </itemtemplate>
</asp:TemplateField>
</Columns>
</tbwc:treegrid>

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

protected void Page_Load(object sender, EventArgs e)
{
	if (!Page.IsPostBack)
	{
		Builder.InitTreeGridManual(this.TreeGrid);
	}
}

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+ "] " + 
	DateTime.Now.ToString();
	if (e.CommandName == "Edit")
	{
		// previous EditingNode
		TreeGridNode oNode = this.TreeGrid.EditingNode; 

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

		e.Row.Owner.RaiseNodeDataBind(false);
	}
	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
		e.Row.Owner.RaiseNodeDataBind(false);
	}
	if (e.CommandName == "Cancel")
	{
		e.Row.Owner.Editing = false;
		e.Row.Owner.DataItem = Builder.GetNodeData(e.Row.Owner.Value);
		e.Row.Owner.RaiseNodeDataBind(false);
	}
	if (e.CommandName == "Remove")
	{
		if (e.Row.Owner.Parent != null)
		{
			e.Row.Owner.Parent.ChildNodes.Remove(e.Row.Owner);
		}
		else
		{
			this.TreeGrid.Nodes.Remove(e.Row.Owner);
		}
	}
}

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

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 demo.zip and run it. The project is a Visual Studio 2008 project.

History

  • 29th September, 2008: Initial post

License

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

Share

About the Author

sherwinzhu
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 
Questiontr.style 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 
I get "tr.style is undefined" in firebug and also cant collapse a node in firefox too.
I've build with VS 2010.
I've trace that nextSibling got text not row as expected.
where is the wrong? cannot figured out.
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 
Generaltr.style is undefined on firefox 3.5.13 when collapsing the node. Pin
yousaf2k5-Oct-10 1:36
memberyousaf2k5-Oct-10 1:36 
GeneralRe: tr.style 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 
GeneralRe: documentation Pin
sherwinzhu3-Aug-09 2:28
membersherwinzhu3-Aug-09 2:28 
GeneralRe: documentation Pin
diego.palumbo3-Aug-09 22:08
memberdiego.palumbo3-Aug-09 22:08 
GeneralCollapse Pin
diego.palumbo3-Aug-09 0:41
memberdiego.palumbo3-Aug-09 0:41 
GeneralRe: Collapse Pin
sherwinzhu3-Aug-09 2:25
membersherwinzhu3-Aug-09 2:25 
GeneralRe: Collapse Pin
diego.palumbo3-Aug-09 22:13
memberdiego.palumbo3-Aug-09 22:13 
GeneralStyle for the header row and sum the values of child node columns Pin
manasbeckham26-Jul-09 19:38
membermanasbeckham26-Jul-09 19:38 
GeneralRe: Style for the header row and sum the values of child node columns Pin
sherwinzhu3-Aug-09 2:22
membersherwinzhu3-Aug-09 2:22 
Questionone error that in dotnet framework 2.0 ? Pin
Todd Zhao23-Jul-09 23:44
memberTodd Zhao23-Jul-09 23:44 
AnswerRe: one error that in dotnet framework 2.0 ? Pin
Todd Zhao23-Jul-09 23:50
memberTodd Zhao23-Jul-09 23:50 
GeneralRe: one error that in dotnet framework 2.0 ? Pin
sherwinzhu23-Jul-09 23:53
membersherwinzhu23-Jul-09 23:53 
AnswerRe: one error that in dotnet framework 2.0 ? Pin
sherwinzhu23-Jul-09 23:52
membersherwinzhu23-Jul-09 23:52 
Generalyou are great Pin
defineconst20-Jul-09 16:50
memberdefineconst20-Jul-09 16:50 
GeneralRe: you are great Pin
sherwinzhu23-Jul-09 23:53
membersherwinzhu23-Jul-09 23:53 
QuestionCan you give another version of this control which can run under dotnet framework 2.0 ???? Pin
pcperson11-May-09 11:26
memberpcperson11-May-09 11:26 
AnswerRe: Can you give another version of this control which can run under dotnet framework 2.0 ???? Pin
sherwinzhu13-May-09 10:05
membersherwinzhu13-May-09 10:05 
QuestionHow does it support DragDrop feature? Pin
Jian123456731-Dec-08 7:17
memberJian123456731-Dec-08 7:17 
GeneralDataItem and viewstate Pin
ashorrock@hotmail.com28-Nov-08 2:28
memberashorrock@hotmail.com28-Nov-08 2:28 
GeneralRe: DataItem and viewstate Pin
sherwinzhu28-Nov-08 6:14
membersherwinzhu28-Nov-08 6:14 
Generalhelp me "e.Row.Cells(4).Attributes.Add" Pin
eagleforce23-Nov-08 16:14
membereagleforce23-Nov-08 16:14 
GeneralRe: help me "e.Row.Cells(4).Attributes.Add" Pin
sherwinzhu26-Nov-08 5:27
membersherwinzhu26-Nov-08 5:27 
Generalthis is my code Pin
eagleforce23-Nov-08 5:38
membereagleforce23-Nov-08 5:38 
GeneralRe: this is my code Pin
sherwinzhu23-Nov-08 5:44
membersherwinzhu23-Nov-08 5:44 
GeneralRe: this is my code Pin
eagleforce23-Nov-08 5:50
membereagleforce23-Nov-08 5:50 
GeneralRe: this is my code Pin
sherwinzhu23-Nov-08 5:47
membersherwinzhu23-Nov-08 5:47 
GeneralSelectedRowStyle BackColor="Red" Pin
eagleforce23-Nov-08 5:13
membereagleforce23-Nov-08 5:13 

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
Web01 | 2.8.171114.1 | Last Updated 29 Sep 2008
Article Copyright 2008 by sherwinzhu
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid