Saturday, April 17, 2010

How to bind XML file in a TreeView control using Asp.net C#

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:
XML DataSource
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:
Tree Datasource
7. Now from TreeView Control smart menu click on Edit TreeNode Databindings to set the XML file Item and Option value like below:
TreeView Node Binding
TreeView Value  Binding

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:
XML DataBinding
Ok thats it. Now you can bind any XML file as a datasource of a TreeView Control.

0 comments:

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash