TreeView Control From The Database
TreeView Control From The Database
Introduction
ASP.NET 2.0 came out with tons of new controls which help developers to speed up development. Among all the new controls, the TreeView control stands out as one of the most important and useful controls. The TreeView control enables you to display data in a hierarchical form. The TreeView control also allows you to embed different ASP.NET controls within it. In this article, we will see that how we can populate a TreeView control from the database.
T-SQL Query
The following T-SQL Query is used to get information about categories and products. You can easily change the query to a stored procedure but I wanted to keep things simple, that is why I did not implement a stored procedure.
Collapse | Copy Code
SELECT p.ProductID, p.ProductName,c.CategoryID,c.CategoryName FROM Products p JOIN Categories c ON p.CategoryID = c.CategoryID ORDER BY c.CategoryID
public class Product { private int productID; private string productName; public int ProductID { get { return this.productID; } set { this.productID = value; } } public string ProductName { get { return this.productName; } set { this.productName = value; } } public Product(int productID, string productName) { this.productID = productID; this.productName = productName; } public Product() { } }
public class Category { private int categoryID; private string categoryName; private List<Product> productList = new List<Product>(); public int CategoryID { get { return this.categoryID; } set { this.categoryID = value; } } public string CategoryName { get { return this.categoryName; } set { this.categoryName = value; } } public List<Product> ProductList { get { return this.productList; } set { this.productList = value; } }
After creating the entity classes, the next task is to populate the generic category list.
Now, let's see how we can create and populate the generic category list. Creating a generic category list is simple, and can be accomplished by a single line of code.
Collapse | Copy Code
Now, let's see how we can populate the category list. The idea behind populating the category list is that a list can have multiple categories and each category can have multiple products. In other words, the generic list will contain the category objects, and each single category object will contain a list of product objects.
Collapse | Copy Code
int i = -1; while (reader.Read()) { Category category = new Category(); category.CategoryID = Convert.ToInt32(reader["CategoryID"]); category.CategoryName = reader["CategoryName"] as String; if (!DoesCategoryIDAlreadyExists(category.CategoryID, categoryList)) { categoryList.Add(category); i++; categoryList[i].productList.Add(new Product( Convert.ToInt32(reader["ProductID"]), reader["ProductName"] as String)); } else { categoryList[i].productList.Add(new Product( Convert.ToInt32(reader["ProductID"]), reader["ProductName"] as String)); } }
The complete code is available in the download. The DoesCategoryIDAlreadyExists checks whether we are dealing with the same category. If we are, then we simply keep on adding the products to that particular category. The approach mentioned above might not be the best approach to populate the category list, and if you come up with something interesting, please let me know. Anyway, after populating the category list, the next task is to populate the TreeView control.
// This method is used to populate the TreeView Control private void PopulateTreeViewControl(List<Category> categoryList) {
TreeNode parentNode = null; foreach (Category category in categoryList) { parentNode = new TreeNode(category.CategoryName, category.CategoryID.ToString()); foreach (Product product in category.ProductList) { TreeNode childNode = new TreeNode(product.ProductName, product.ProductID.ToString()); parentNode.ChildNodes.Add(childNode); } parentNode.Collapse(); // Show all checkboxes tvCategories.ShowCheckBoxes = TreeNodeTypes.All; tvCategories.Nodes.Add(parentNode); } }
The PopulateTreeViewControl method takes the category list as a parameter, and iterates through to populate the TreeView control. The Collapse method of the TreeNode is responsible for keeping the TreeView compact so that the leafs are not expanded. Finally, after creating the TreeNodes and ChildNodes, the nodes are added to the TreeView's Nodes collection. Take a look at the screenshot below:
Conclusion
In this article, we learned how the TreeView control can be populated with the data from the database. The use of entity classes simplified the development, and cut down the lines of code. In later articles, we will see how we can select the nodes using checkboxes inside the TreeView control. I hope you liked the article, happy coding!