Subscribe
Please visit my new Web Site https://coderstechzone.com
By using Asp.net TreeView control we can give enhanced UI experience to the user. We can specially use TreeView control to display hierarchical data like MLM tree, Sitemap. We can bind data into the TreeView control from database self referencial table as well as from a XML file. Here in this article or tutorial i am going to explain how one can bind XML data into a TreeView control as well as we will cover how to use asp.net TreeView control means its also an introduction or an introductory article to use asp.net TreeView Control. To do that please follow the below steps:
1. Add an aspx page in your project.
2. Add a XML file in your project and name this file as "ComputerItems.xml". The sample XML file is geven below:
<?xml version="1.0" encoding="utf-8" ?>
<Computer>
<Item Name="Motherboard">
<Option Value="Intel"></Option>
<Option Value="Asus"></Option>
<Option Value="Xbit"></Option>
</Item>
<Item Name="Memory">
<Option Value="128mb"></Option>
<Option Value="256mb"></Option>
<Option Value="512mb"></Option>
</Item>
<Item Name="Harddrive">
<Option Value="40gb"></Option>
<Option Value="80gb"></Option>
<Option Value="100gb"></Option>
</Item>
<Item Name="Soundcard">
<Option Value="Asus"></Option>
<Option Value="Vaio"></Option>
<Option Value="Creative"></Option>
</Item>
</Computer>
3. Open the aspx page in design view and drag a XMLDataSource into the page.4. Cilck on the XMLDataSource smart menu and browse to bind the XML file like below:
5. Now drag a TreeView Control and drop it into your page.
6. From TreeView Control smart menu set the XMLDataSource as DataSource like below:
7. Now from TreeView Control smart menu click on Edit TreeNode Databindings to set the XML file Item and Option value like below:
Now your HTML marup code looks like:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeView_XML.aspx.cs" Inherits="TreeView_XML" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>How to use TreeView control in ASP.NET 2.0 3.5</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="lbl" Font-Bold="true" Font-Underline="true">An introduction to TreeView conrol</asp:Label>
<br />
<br />
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1">
<DataBindings>
<asp:TreeNodeBinding DataMember="Item" ValueField="Name" />
<asp:TreeNodeBinding DataMember="Option" ValueField="Value" />
</DataBindings>
</asp:TreeView>
</div>
<br />
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/ComputerItems.xml">
</asp:XmlDataSource>
</form>
</body>
</html>
Now run the project and hope you will get below interface:
Ok thats it. Now you can bind any XML file as a datasource of a TreeView Control.
0 comments:
I WOULD BE DELIGHTED TO HEAR FROM YOU