TreeView and Hierarchical Data
Prerequisites
Part of Case Study – My Daily Math
Summary
Shows how to use the TreeView to represent hierarchical data and how to bind to a DataTable with conversion to a hierarchical data source.
Video
http://online1.daytonastate.edu/player2.php?id=41ab1b1d6bf108f388dfb5cd282fb76c
Reference Materials
| CREATE TABLE [dbo].[Taxonomies]( [id] [int] IDENTITY(1,1) NOT NULL, [ParentTaxonomyID] [int] NULL FOREIGN KEY REFERENCES Taxonomies(id),, [TaxonomyText] [nvarchar](255) NOT NULL, [TaxonomyDescription] [nvarchar](max) NULL, [EnteredByUserID] [int] NULL, [EnteredDate] [datetime] NULL)GO CREATE PROCEDURE sp_DeleteTaxonomy( @id INT ) AS BEGIN DELETE FROM Taxonomies WHERE id = @id END |
| EditTaxonomy.aspx | <%@ Page Title=”” Language=”C#” MasterPageFile=”~/LoggedIn.Master” AutoEventWireup=”true” CodeBehind=”EditTaxonomy.aspx.cs” Inherits=”MyDailyMath.Administrator.EditTaxonomy” %><%@ MasterType virtualpath=”~/LoggedIn.Master” %><asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”server”></asp:Content><asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”server”><table class=”InputTable”><tr><td class=”TablePrompt”>Parent Taxonomy:</td><td class=”TableInput”><asp:DropDownList ID=”ddlParent” runat=”server”> </asp:DropDownList></td></tr><tr><td class=”TablePrompt” >Taxonomy Title:</td><td class=”TableInput”> <asp:TextBox ID=”tbTaxonomyText” runat=”server” Width=”300″></asp:TextBox><asp:RequiredFieldValidator ID=”rfv1″ runat=”server” ErrorMessage=”Taxonomy Must Have a Title” ControlToValidate=”tbTaxonomyText”></asp:RequiredFieldValidator> </td></tr><tr><td class=”TablePrompt” >Taxonomy Description:</td><td class=”TableInput”> <asp:TextBox ID=”tbTaxonomyDescription” runat=”server” TextMode=”MultiLine” Width=”300″ Height=”100″></asp:TextBox> </td></tr><tr><td></td><td class=”TableInput”> <asp:Button ID=”btnSubmit” runat=”server” Text=”Submit” CssClass=”SubmitButton” onclick=”btnSubmit_Click” /> <asp:Button ID=”btnClear” runat=”server” Text=”Clear” CssClass=”SubmitButton” onclick=”btnClear_Click” /> </td></tr><tr><td ><h3>Heirarchical View of Taxonomies</h3> <asp:TreeView ID=”tvTaxonomies” runat=”server” OnSelectedNodeChanged=”tvNodeChanged” > <DataBindings> <asp:TreeNodeBinding DataMember=”System.Data.DataRowView” TextField=”TaxonomyText” ValueField=”id” /> </DataBindings> </asp:TreeView> </td> <td class=”TableInput” colspan=”2″> <asp:GridView ID=”gvTaxonomies” runat=”server” CellPadding=”4″ ForeColor=”#333333″ GridLines=”None” AutoGenerateColumns=”false” OnRowCommand=”gvTaxonomies_OnRowCommand”> <AlternatingRowStyle BackColor=”White” /> <EditRowStyle BackColor=”#2461BF” /> <FooterStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” /> <HeaderStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” /> <PagerStyle BackColor=”#2461BF” ForeColor=”White” HorizontalAlign=”Center” /> <RowStyle BackColor=”#EFF3FB” /> <SelectedRowStyle BackColor=”#D1DDF1″ Font-Bold=”True” ForeColor=”#333333″ /> <SortedAscendingCellStyle BackColor=”#F5F7FB” /> <SortedAscendingHeaderStyle BackColor=”#6D95E1″ /> <SortedDescendingCellStyle BackColor=”#E9EBEF” /> <SortedDescendingHeaderStyle BackColor=”#4870BE” /> <Columns> <asp:BoundField DataField=”id” HeaderText=”ID” /> <asp:BoundField DataField=”TaxonomyText” HeaderText=”Text” /> <asp:BoundField DataField=”ParentTaxonomyID” HeaderText=”Parent” /> <asp:TemplateField> <ItemTemplate> <asp:LinkButton ID=”lbEdit” runat=”server” CommandName=”editt” CommandArgument='<%#Eval(“id”) %>’ CausesValidation=”false”>Edit</asp:LinkButton> | <asp:LinkButton ID=”lbDelete” runat=”server” CommandName=”deletet” CommandArgument='<%#Eval(“id”) %>’ CausesValidation=”false”>Delete</asp:LinkButton> <ajaxToolkit:ConfirmButtonExtender ID=”cbe1″ runat=”server” TargetControlID=”lbDelete” ConfirmText=”Confirm -Do you wish to delete this Taxonomy and all its children?” ConfirmOnFormSubmit=”false” /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView></td></tr></table></asp:Content> |
| EditTaxonomy.aspx | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Xml;using MyDailyMath.Code;namespace MyDailyMath.Administrator{ public partial class EditTaxonomy : System.Web.UI.Page { public int TaxonomyID { get { return MyDailyMathDB.getSessionVariable(“TaxonomyID”,Session); } set { Session.Add(“TaxonomyID”, value); } } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { setup(); setValues(); } } protected void btnSubmit_Click(object sender, EventArgs e) { int uid = Master.userID; int p = Convert.ToInt32(ddlParent.SelectedValue); if (TaxonomyID == 0) MyDailyMathDB.insertTaxonomy(p , tbTaxonomyText.Text, tbTaxonomyDescription.Text, uid); else MyDailyMathDB.updateTaxonomy(TaxonomyID, p, tbTaxonomyText.Text, tbTaxonomyDescription.Text, uid); setup(); clearValues(); } protected void setup() { setupGridView(); setupDropDown(); setupTreeView(); } protected void setupDropDown() { ddlParent.DataSource = MyDailyMathDB.getAllTaxonomies(); ddlParent.DataTextField = “TaxonomyText”; ddlParent.DataValueField = “id”; ddlParent.DataBind(); ListItem li = new ListItem(” None “, “0”); ddlParent.Items.Insert(0, li); } protected void setupGridView() { gvTaxonomies.DataSource = MyDailyMathDB.getAllTaxonomies(); gvTaxonomies.DataBind(); } protected void setupTreeView() { tvTaxonomies.DataSource = new HierarchicalDataSet(MyDailyMathDB.getAllTaxonomies(), “id”, “ParentTaxonomyID”); tvTaxonomies.DataBind(); } protected void setValues() { int id = TaxonomyID; if (id == 0) return; tbTaxonomyText.Text = MyDailyMathDB.getTaxonomyText(id); tbTaxonomyDescription.Text = MyDailyMathDB.getTaxonomyDescription(id); try { ddlParent.SelectedValue = MyDailyMathDB.getTaxonomyParentID(id); } catch { ddlParent.SelectedIndex = 0; } } protected void clearValues() { TaxonomyID = 0; ddlParent.SelectedValue = “0”; tbTaxonomyText.Text = string.Empty; tbTaxonomyDescription.Text = string.Empty; } protected void gvTaxonomies_OnRowCommand(Object sender, GridViewCommandEventArgs e) { int id = Convert.ToInt32(e.CommandArgument); if (e.CommandName == “editt”) { TaxonomyID = id; setValues(); } if (e.CommandName == “deletet”) { MyDailyMathDB.deleteTaxonomy(id); setup(); } } protected void tvNodeChanged(Object sender, EventArgs e) { int id = Convert.ToInt32(tvTaxonomies.SelectedNode.Value); TaxonomyID = id; setValues(); } protected void btnClear_Click(object sender, EventArgs e) { TaxonomyID = 0; clearValues(); } }} |
| HierarchicalDataSet.cs | see http://varjabedian.net/archive/2008/04/22/binding-asp.net-treeview-to-a-dataset-or-an-objectdatasource.aspx code added public HierarchicalDataSet(DataTable dataTable, string idColumnName, string parentIdColumnName) { dataView = dataTable.DefaultView; this.idColumnName = idColumnName; this.parentIdColumnName = parentIdColumnName; rootParentColumnValue = null; // Check to make sure the columns are of the same data type if (dataTable.Columns[idColumnName].DataType != dataTable.Columns[parentIdColumnName].DataType) throw new Exception(“The two column names passed should be of the same type”); columnIsString = dataTable.Columns[idColumnName].DataType == typeof(string); System.Diagnostics.Debug.Assert( dataTable.Columns[idColumnName].DataType == dataTable.Columns[parentIdColumnName].DataType, “The Column of the ID and the Column of the ParentID should be of the same type”); } |