Click here to Skip to main content
Click here to Skip to main content
Go to top

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

Comments and Discussions

 
QuestionUnable to set property 'display' of undefined or null reference Pinmemberlalitjoshilalit10-Sep-14 0:33 
Questionunable to expand past 2nd level node PinmemberRobert Glassett20-May-13 11:15 
Questiontr.style is undefined in firebug and also cant collapse a node in firefox Pinmemberdeni_syahreza30-Mar-13 0:27 
GeneralMy vote of 5 PinmemberPrakash Kalakoti20-Jun-12 22:23 
QuestionHow pagging in tb.treeview? Pinmembersuco_20047-Apr-11 18:06 
QuestionNodeCell issue [modified] Pinmemberirene kuan12-Jan-11 16:46 
Generaltr.style is undefined on firefox 3.5.13 when collapsing the node. Pinmemberyousaf2k5-Oct-10 0:36 
GeneralRe: tr.style is undefined on firefox 3.5.13 when collapsing the node. Pinmemberlalitjoshilalit10-Sep-14 0:40 
GeneralComplete Source Code of The Control Pinmemberyousaf2k30-Aug-10 21:31 
GeneralAccess all the nodes PinmemberJyothiPrajna6-Jul-10 16:28 
GeneralRe: Access all the nodes Pinmembertylerjaques11-Nov-10 7:28 
GeneralScrolling in TreeGrid PinmemberJyothiPrajna30-Jun-10 17:03 
GeneralDatabind from a datasource for this control.. Please help PinmemberJyothiPrajna29-Jun-10 7:23 
Generalit doesn`t work with firefox PinmemberEslam Zien8-Dec-09 3:16 
Generaldll not working in shared hosting PinmemberRanjanahere25-Nov-09 21:48 
GeneralTreeGridDemo.dll Pinmemberdiego.palumbo24-Sep-09 23:19 
GeneralDoesn't work with Chrome or Firefox Pinmembermanasbeckham7-Sep-09 17:19 
GeneralRe: Doesn't work with Chrome or Firefox Pinmemberdiego.palumbo24-Sep-09 23:14 
GeneralContext menu... Pinmemberdiego.palumbo3-Aug-09 21:18 
GeneralAccess all the nodes Pinmembermanasbeckham3-Aug-09 3:17 
GeneralRe: Access all the nodes Pinmembersherwinzhu3-Aug-09 21:30 
GeneralRe: Access all the nodes Pinmembermanasbeckham4-Aug-09 21:02 
GeneralRe: Access all the nodes PinmemberJyothiPrajna6-Jul-10 16:25 
GeneralRe: Access all the nodes [Download Complete Source from here] Pinmemberyousaf2k30-Aug-10 21:29 
Generaldocumentation Pinmemberdiego.palumbo3-Aug-09 0:11 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 29 Sep 2008
Article Copyright 2008 by sherwinzhu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid