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.
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.
