Version

Binding to Xml Data Source

Before You Begin

WebHierarchicalDataGrid™ allows you to bind to hierarchical data with sibling bands. The control displays the sibling data as separate container grids. With sibling data, a parent row may have more than one set of data islands. To reference a specific data island belonging to a particular row, use the row’s RowIslands property with the band’s DataMember name or key as the accessor.

What You Will Accomplish

You will learn how to bind to an XmlDataSource that retrieves hierarchical data with sibling data bands. The sample uses the CategoriesandProducts file.

Follow these Steps

  1. Create an ASP.Net web page.

  2. Drag a ScriptManager component from the toolbox onto the page.

  3. Drag a WebHierarchicalDataGrid control from the toolbox onto the page.

  4. Drag an XmlDataSource control from the toolbox onto the page.

  5. 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="/Categories/Category">
</asp:XmlDataSource>

  1. Set the DataSourceID property of WebHierarchicalDataGrid to "XmlDataSource1", the ID of the XmlDataSource control.

  2. Set up the root band’s column schema.

In HTML:

<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server"
   AutoGenerateBands=" AutoGenerateColumns="
   DataSourceID="XmlDataSource1" DefaultColumnWidth="" Key="Category" 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>

  1. Define the sibling bands.

In HTML:

<Bands>
   <%-- Sibling band 1 --%>
   <ig:Band AutoGenerateColumns=" DataMember="Product" 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>
   </Bands>

  1. Run the application. WebHierarchicalDataGrid displays a parent row with nested sibling rows.

Related Topics

Binding to Self-Related Data