<asp:XmlDataSource
ID="XmlDataSource1"
runat="server"
DataFile="~/App_Data/CategoriesAndProducts.xml"
XPath="Categories/Category">
</asp:XmlDataSource>
The WebExplorerBar™ can bind to a hierarchical data source, displaying each level of the data hierarchy. The topmost level represents the different groupings, with each child level representing the items.
You will learn how to bind to data using the WebExplorerBar control and an XmlDataSource component. The sample uses the CategoriesandProducts file.
Drag a ScriptManager component from the Visual Studio™ Toolbox onto the web page.
Drag a WebExplorerBar control onto the page.
Drag an XmlDataSource component onto the page.
Set up the XmlDataSource component to retrieve data using an XML file.
Set the DataFile property to the location of the data file.
Set the XPath property to select the Category nodes.
In HTML:
<asp:XmlDataSource
ID="XmlDataSource1"
runat="server"
DataFile="~/App_Data/CategoriesAndProducts.xml"
XPath="Categories/Category">
</asp:XmlDataSource>
Set WebExplorerBar’s DataSourceID property to XmlDataSource1, the id of the XmlDataSource component.
Set the data bindings to display the CategoryName and ProductName attributes from the Category and Product nodes, respectively.
Create a ExplorerBarItemBinding object and set its DataMember property to "Category".
Set the TextField property to "CategoryName".
Create a second ExplorerBarItemBinding object and set its DataMember property to "Product".
Set the TextField property to "ProductName".
In HTML:
<ig:WebExplorerBar ID="WebExplorerBar1" runat="server" Width="300px" DataSourceID="XmlDataSource1" BehaveMode="AnyExpandable">
<DataBindings>
<ig:WebExplorerBinding DataMember="Category" TextField="CategoryName" />
<ig:WebExplorerBinding DataMember="Product" TextField="ProductName" />
</DataBindings>
</ig:WebExplorerBar>
Run the application. The WebExplorerBar control displays the data from the Category and Product nodes.
