When you have to deal with much more complex XML structures you can show nested elements by nesting one grid control inside another. The remarkable part is that ASP.NET provides support for this approach without requiring you to write any code. The next example uses nested grids to create a list of books, with a separate list of additional information related to each book. The next XML file named BooksList.xml is used as example:
<?xml version=”1.0″ encoding=”utf-8″?>
<BooksList>
<Book>
<ISBN-13>978-0545139700</ISBN-13>
<Title>Harry Potter and the Deathly Hallows</Title>
<Author>J.K. Rowling</Author>
<Price>14.99</Price>
<Available>True</Available>
<AdditionalInfo>
<Pages>784</Pages>
<Publisher>Arthur A. Levine Books</Publisher>
<Date>July 7, 2009</Date>
</AdditionalInfo>
</Book>
<Book>
<ISBN-13>978-1451648539</ISBN-13>
<Title>Steve Jobs</Title>
<Author>Walter Isaacson</Author>
<Price>14.88</Price>
<Available>True</Available>
<AdditionalInfo>
<Pages>656</Pages>
<Publisher>Simon and Schuster</Publisher>
<Date>October 24, 2011</Date>
</AdditionalInfo>
</Book>
<Book>
<ISBN-13>978-0765309761</ISBN-13>
<Title>Tunnel Vision</Title>
<Author>Gary Braver</Author>
<Price>14.15</Price>
<Available>False</Available>
<AdditionalInfo>
<Pages>383</Pages>
<Publisher>Forge</Publisher>
<Date>June 21, 2011</Date>
</AdditionalInfo>
</Book>
</BooksList>
To accomplish this, you begin by defining the outer grid. Using a template, you can display the ISBN-13, title and author information:
<asp:XmlDataSource ID=”sourceBooks” runat=”server” DataFile=”BooksList.xml”></asp:XmlDataSource>
<asp:GridView ID=”GridView1″ runat=”server” DataSourceID=”sourceBooks” AutoGenerateColumns=”False”>
<Columns>
<asp:TemplateField HeaderText=”Books”>
<ItemTemplate>
<b><%# XPath(“ISBN-13”) %></b>
<br />
<b><%# XPath(“Title”) %></b>
<br />
<%# XPath(“Author”) %>
<br />
Now, you need to define another GridView control inside the template of the first GridView. The trick is in the DataSource property, which you can set using a new XPathSelect() data binding statement, as shown here:
<asp:GridView ID=”GridView2″ runat=”server” AutoGenerateColumns=”False” DataSource='<%# XPathSelect(“AdditionalInfo/*”) %>’>
In the markup XPathSelect() is called and by using it you supply the XPath expression that retrieves the XmlNodeList based on a search starting at the current node. In this case, you need to drill down to the nested group of elements.
Once you’ve set the right data source, all you need to do is define a template in the second GridView that displays the appropriate information. In this case, you need only a single data binding expression to get the element text:
<Columns>
<asp:TemplateField HeaderText=”Additional information”>
<ItemTemplate>
<%# XPath(“.”) %><br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The next picture shows the grid with additional extra information:
Showing XML with nested grids