| |   Skin:   
      User: Not logged in 
Newsletter Signup
XSLT Library
Latest XML Blogs
Featured Examples
Featured Articles
Book Chapters
Training Courses
Sign In
My Profile
My Articles
My Examples
My Favorites
My Resources
Add a Resource
About Me
My Blog
HeadGeek Articles
Talking Portfolio
World Trip Pics

Simple Master / Detail with use of two GridViews
Author: Ivan Osmak
Published: 6/13/2005 6:19 PM
Category: ASP.NET, XML.NET
Summary: Binding xml file with two tables (nodes) "Authors" and "Books" to two different GridViews. User can select an author in first GridView and display author's books in second GridView.



If you are not familiar with new XmlDataSource control, check "Using XmlDataSource" article. The main idea here is that we have two XmlDataSources that both use one single Xml file, with different XPath properties though. The "filtering" in second GridView that shows only books for selected author is done with chaning XPath property of the XmlDataSource for the second GridView. Those of you who are just starting with ASP.NET 2, note the new command in GridView (SELECT), which replaces ItemCommand and then getting DataKey with e.Item.ItemIndex. It's much simpler now, but old dog needs to learn some new tricks. You can see online demo here and download source here.

1. Create XmlDataSource for GridView Authors and GridViewBooks

Insert this tag on the web form to create DataSource for gvwAuthors: 

<asp:XmlDataSource ID="xmlAuthors" runat="server" DataFile="~/xml/books.xml" XPath="bookstore/authors"> </asp:XmlDataSource>
Notice, how we used XPath to select only authors table (node) for this data source.
Now insert this tag to create a data source for gvwBooks, the GridView that will show books for selected Author.

<asp:XmlDataSource ID="xmlBooks" runat="server" DataFile="~/xml/books.xml"> </asp:XmlDataSource>

In second data source we have not specified XPath, because we will not bind gvwBooks to it until user selects an author. When he does select an author, we will create XPath on the fly and bind gvwBooks to datasource xmlBooks.

2. Create GridView controls gvwAuthors and gvwBooks

<asp:GridView ID="gvwAuthors" runat="server" AutoGenerateColumns="False" DataSourceID="xmlAuthors" DataKeyNames="ID" OnSelectedIndexChanged="gvwAuthors_Select">
<asp:BoundField DataField="name" HeaderText="Name" SortExpression="name" /> <asp:BoundField DataField="country" HeaderText="Country" SortExpression="country" /> <asp:CommandField EditText="Show books" SelectText="Show books" ShowSelectButton="True" />

We have set DataSourceID to xmlAuthors which we have created in step 1. Also we have set DataKeyNames="ID", because we want to be able to retrieve the ID of an author when user selects it. As I have already mentioned, there is a difference here in regard to ASP.NET 2. We have "OnSelectedIndexChanged" event which is triggered by "CommandField" which has ShowSelectButton to true. We will get later to that method, which is also the only "non-declarative" piece of code in this example.

Now, let's add second GridView (gvwBooks) which we will use to show the books written by a selected author.

<asp:GridView ID="gvwBooks" runat="server" AutoGenerateColumns="False">
<asp:BoundField DataField="title" HeaderText="Book title" SortExpression="title" /> </Columns>

Notice that we are not setting the "DataSourceID" property here, because we don't want to bind it before user selects an author. 

3. Add method gvwAuthors_Select

<script runat="server">

private void gvwAuthors_Select(object s, EventArgs e)
string authorID = gvwAuthors.SelectedValue.ToString() ;
xmlBooks.XPath = "bookstore/books[@authorID=" + authorID + "]";
gvwBooks.DataSourceID = "xmlBooks";


This method is called whenever a user clicks "Show Books" link in GridView gvwAuthors. First thing we are doing is getting authorID. You may notice the change between ASP.NET 1 and ASP.NET 2. GridView has SelectedValue (which correspondens to DataKeyName we have set for this GridView) property.
Second line sets the XPath property of xmlBooks XmlDataSource. We are taking all books entries where authorID is equal to SelectedValue/authorID. At the end we simply set the DataSourceID of GridView gvwBooks to "xmlBooks". Notice that this property sets the DataSourceID, therefore the value is string and not an object.


I have purposly used two GridViews to explore the new GridView functionality. An alternative could be to use DropDownList and GridView, which most of you will probably use more commonly. The principle is same though.


Fans of "The Office"
Dwight Bobbleheads are here!
  “It's me! I'm the bobblehead! Yes!”

Advertise on XMLPitstop

Advertise on XMLPitstop

EggHead Cafe
Web Servicee development
Buy text ads here!
remote online storage
Color Laser Printer
Bvlgari sunglasses
Skype vs. sipcall
VoIP Internettelefonie
Buy text ads here!

Interested in Text ads?
2,223 Total Members
36 members(last 30 days)
8 members(last 7 days)
2 members(today)

1,609 Total Discussions
12 Posts(last 30 days)
0 Posts(last 7 days)
0 Posts(today)

17,260 Total Blog Posts
1,839 Blogs(last 30 days)
342 Blogs(last 7 days)
49 Blogs(today)

8,699 Newsgroup Posts
0 Posts(last 30 days)
0 Posts(last 7 days)
0 Posts(today)

13,786 Total Resources
5 Resources(last 30 days)
1 Resources(last 7 days)
0 Resources(today)


David Silverlight's| 2801 Florida Ave #225|Miami, FL 33133|Ph:305-447-1139