Tuesday, September 13, 2011

Display hierarchial data using TreeView :: Parent-Child Relationship

Treeview is a control available in ASP.NET to show hierarchial data. Using features of treeview and power of dataset, we can design a tree wrt datatable with parent-child relationship. This post explains the implementation of hierarchial data into treeview.
This figure illustrate the outcome and datatable strucuture to which tree should be mapped.

C# : Server Side Code
    public void bindDataToTree(DataSet __dsData)
    {
        treeViewCategories.Nodes.Clear();
        __dsData.Relations.Add("NodeRelation", __dsData.Tables[0].Columns["Category_Id"], __dsData.Tables[0].Columns["Parent_Id"]);
        foreach (DataRow dr in __dsData.Tables[0].Rows)
        {
            if (dr.IsNull("Parent_Id"))
            {
                TreeNode newNode = CreateNode(dr["Category_Name"].ToString(), dr["Category_Id"].ToString(), true);
                treeViewCategories.Nodes.Add(newNode);
                PopulateSubTree(dr, newNode);
            }
        }
    }

    private TreeNode CreateNode(string text, string value, bool expanded)
    {
        TreeNode node = new TreeNode();
        node.Text = text;
        node.Value = value;
        node.Expanded = expanded;
        return node;
    }

    private void PopulateSubTree(DataRow dbRow, TreeNode node)
    {
        foreach (DataRow childRow in dbRow.GetChildRows("NodeRelation"))
        {
            TreeNode childNode = CreateNode(childRow["Category_Name"].ToString(), childRow["Category_Id"].ToString(), true);
            node.ChildNodes.Add(childNode);
            PopulateSubTree(childRow, childNode);
        }
    }

CSS Style
    body{ font:normal 10pt arial;}
    a{ color:#006699;}
    .tvHoverStyle{ text-decoration:underline;}
    .tvRootNode{ font-weight:bold; color:#000; font-size:1.1em;}
    .tvParentNode{ font-weight:bold;}

ASPX page
    
        
        
        
    

No comments:

Post a Comment