In this article I will explain with an example, how to implement GridView DetailsView Master detail i.e. display (show) GridView Selected Row in DetailsView control in ASP.Net using C# and VB.Net.
 
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView with two BoundField columns, one hidden TemplateField column with a Label and one ButtonField column which consists of a Select Button to select the GridView Row.
Below the GridView, there’s a DetailsView control for displaying the selected GridView row details.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="OnSelectedIndexChanged">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:TemplateField HeaderText="Country" Visible="false">
            <ItemTemplate>
                <asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:ButtonField Text="Select" CommandName="Select" />
    </Columns>
</asp:GridView>
<br />
<u>Selected Row:</u>
<br />
<br />
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="false">
    <Fields>
        <asp:BoundField DataField="Id" HeaderText="Id" HeaderStyle-Font-Bold="true" />
        <asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-Font-Bold="true" />
        <asp:BoundField DataField="Description" HeaderText="Description" HeaderStyle-Font-Bold="true" />
    </Fields>
</asp:DetailsView>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the GridView
The GridView is populated using some dummy records using DataTable.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                    new DataColumn("Name", typeof(string)),
                    new DataColumn("Description",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.");
        dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.");
        dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.");
        dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id", GetType(Integer)), _
                                               New DataColumn("Name", GetType(String)), _
                                               New DataColumn("Description", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.")
        dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.")
        dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.")
        dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Displaying GridView Selected Row in DetailsView control
When the Select Button is clicked, the OnSelectedIndexChanged event handler of the ASP.Net GridView is triggered. The ID and Name values are extracted directly from the BoundField column, while the Description value is extracted via finding the Label control inside the TemplateField column.
The fetched values are inserted into a dynamic DataTable which is finally used to populate the DetailsView control.
C#
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    string id = GridView1.SelectedRow.Cells[0].Text;
    string name = GridView1.SelectedRow.Cells[1].Text;
    string description = (GridView1.SelectedRow.FindControl("lblDescription") as Label).Text;
 
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                    new DataColumn("Name", typeof(string)),
                    new DataColumn("Description",typeof(string)) });
    dt.Rows.Add(id, name, description);
    DetailsView1.DataSource = dt;
    DetailsView1.DataBind();
}
 
VB.Net
Protected Sub OnSelectedIndexChanged(sender As Object, e As EventArgs)
    Dim id As String = GridView1.SelectedRow.Cells(0).Text
    Dim name As String = GridView1.SelectedRow.Cells(1).Text
    Dim description As String = TryCast(GridView1.SelectedRow.FindControl("lblDescription"), Label).Text
 
    Dim dt As New DataTable()
    dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id", GetType(Integer)), _
                                           New DataColumn("Name", GetType(String)), _
                                           New DataColumn("Description", GetType(String))})
    dt.Rows.Add(id, name, description)
    DetailsView1.DataSource = dt
    DetailsView1.DataBind()
End Sub
 
 
Screenshot
ASP.Net GridView DetailsView Master Detail Example: Display selected GridView Row in DetailsView in ASP.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code