# Create an ASP.Net web page.
# Drag a ScriptManager component from the toolbox onto the page.
# Drag a WebHierarchicalDataGrid control from the toolbox onto the page.
# Drag an XmlDataSource control from the toolbox onto the page.
# Set up the XmlDataSource to use the CategoriesAndProducts.xml data file and set a data path to retrieve the Categories data.
In HTML:
<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="~/App_Data/CategoriesAndProducts.xml" XPath="/NewDataSet/Categories">
</asp:XmlDataSource>
# Set the DataSourceID property of WebHierarchicalDataGrid to "XmlDataSource1", the ID of the XmlDataSource control.
# Set up the root band's column schema.
In HTML:
<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server"
AutoGenerateBands="False" AutoGenerateColumns="False"
DataSourceID="XmlDataSource1" DefaultColumnWidth="" Key="Categories" DataKeyFields="CategoryID">
<%-- Define columns for Categories data --%>
<Columns>
<ig:BoundDataField DataFieldName="CategoryID" Key="CategoryID" Header-Text="CategoryID" />
<ig:BoundDataField DataFieldName="CategoryName" Key="CategoryName" Header-Text="Category Name" />
<ig:BoundDataField DataFieldName="Description" Key="Description" Header-Text="Description" />
</Columns>
<%-- TODO: define sibling bands --%>
</ig:WebHierarchicalDataGrid>
# Define the sibling bands.
In HTML:
<Bands>
<%-- Sibling band 1 --%>
<ig:Band AutoGenerateColumns="False" DataMember="BrandA" DataKeyFields="ProductID">
<Columns>
<ig:BoundDataField DataFieldName="ProductID" Key="ProductID" Header-Text="ProductID" />
<ig:BoundDataField DataFieldName="ProductName" Key="ProductName" Header-Text="Name" />
<ig:BoundDataField DataFieldName="QuantityPerUnit" Key="QuantityPerUnit" Header-Text="Quantity Per Unit" />
<ig:BoundDataField DataFieldName="UnitPrice" Key="UnitPrice" Header-Text="Unit Price" />
</Columns>
</ig:Band>
<ig:Band AutoGenerateColumns="False" DataMember="BrandB" DataKeyFields="ProductID">
<Columns>
<%-- Sibling band 2 --%>
<ig:BoundDataField DataFieldName="ProductID" Key="ProductID" Header-Text="ProductID" />
<ig:BoundDataField DataFieldName="Name" Key="Name" Header-Text="Name" />
<ig:BoundDataField DataFieldName="Description" Key="Description" Header-Text="Description" />
</Columns>
</ig:Band>
</Bands>
# Run the application.
