Detailsview in asp.net - Part 37

Suggested Videos 
Part 34 - Drilldown and display hierarchical data in gridview using sqldatasource control
Part 35 - Drilldown and display hierarchical data in gridview using objectdatasource control
Part 36 - Drilldown and display hierarchical data in gridview without using datasource controls



Just like gridview, detailsview is also a databound control. Detailsview is used to display one row at a time. Let us understand a practical use of details view with an example.

I have table tblEmployee with 10 columns. Use the sql script below to create and populate this table with sample data.
Create table tblEmployee
(
Id int primary key identity(1,1),
FirstName nvarchar(50),
LastName nvarchar(50),
City nvarchar(20),
Gender nvarchar(10),
DateOfBirth DateTime,
Country nvarchar(10),
Salary int,
DateOfJoining DateTime,
MaritalStatus nvarchar(20)
)



Insert into tblEmployee values ('Tom','Minst','Alexandria','Male','10/10/1980','USA',5000,'09/09/2003','Married')
Insert into tblEmployee values 
('Pam','Bruney','Falls Church','Female','11/09/1979','USA',3400,'07/07/2008','Married')
Insert into tblEmployee values ('John','Oswin','London','Male','03/08/1980','UK',5500,'06/02/2001','Single')
Insert into tblEmployee values 
('Nick','Lan','New Delhi','Male','05/09/1975','India',7800,'01/05/1995','Married')
Insert into tblEmployee values ('James','Marshal','London','Male','01/10/1977','UK',6300,'08/09/2001','Single')

In a gridview control, I just want to show 3 columns (Id, FirstName and City) from tblEmployee table. As soon as I select a row, in the gridview control, then all the columns of the selected row, should be displayed in details view control as shown below.


To achieve this 
Step 1: Drag and drop a gridview and a detailsview control on webform1.aspx
Step 2: Drag and drop 2 sqldatasource controls
Step 3: Configure SqlDataSource1 to retrieve [Id], [FirstName], [City] columns from tblEmployee table
Step 4: Associate SqlDataSource1 with GridView1 control
Step 5: Configure SqlDataSource2 to retrieve all columns from tblEmployee table. Add a WHERE clause to filter the rows based on the selected row in GridView1 control.


Step 6: Associate SqlDataSource2 with DetailsView1 control

At this point the HTML of your webform should be as shown below.
<asp:GridView ID="GridView1" runat="server" 
    AutoGenerateColumns="False" 
    DataKeyNames="Id" DataSourceID="SqlDataSource1">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="Id" HeaderText="Id" 
            InsertVisible="False" 
            ReadOnly="True" SortExpression="Id" />
        <asp:BoundField DataField="FirstName" 
            HeaderText="FirstName" 
            SortExpression="FirstName" />
        <asp:BoundField DataField="City" HeaderText="City" 
            SortExpression="City" />
    </Columns>
</asp:GridView>
<br />
<asp:DetailsView ID="DetailsView1" runat="server" 
    AutoGenerateRows="False" 
    DataKeyNames="Id" DataSourceID="SqlDataSource2" 
    Height="50px" Width="125px">
    <Fields>
        <asp:BoundField DataField="Id" HeaderText="Id" 
            InsertVisible="False" 
            ReadOnly="True" SortExpression="Id" />
        <asp:BoundField DataField="FirstName" 
            HeaderText="FirstName" 
            SortExpression="FirstName" />
        <asp:BoundField DataField="LastName" 
            HeaderText="LastName" 
            SortExpression="LastName" />
        <asp:BoundField DataField="City" 
            HeaderText="City" 
            SortExpression="City" />
        <asp:BoundField DataField="Gender" 
            HeaderText="Gender" 
            SortExpression="Gender" />
        <asp:BoundField DataField="DateOfBirth" 
            HeaderText="DateOfBirth" 
            SortExpression="DateOfBirth" 
            DataFormatString="{0:d}" />
        <asp:BoundField DataField="Country" 
            HeaderText="Country" 
            SortExpression="Country" />
        <asp:BoundField DataField="Salary" 
            HeaderText="Salary" 
            SortExpression="Salary" />
        <asp:BoundField DataField="DateOfJoining" 
            HeaderText="DateOfJoining" 
            SortExpression="DateOfJoining" 
            DataFormatString="{0:d}"/>
        <asp:BoundField DataField="MaritalStatus" 
            HeaderText="MaritalStatus" 
            SortExpression="MaritalStatus" />
    </Fields>
</asp:DetailsView>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:DBCS %>" 
    SelectCommand="SELECT [Id], [FirstName], [City] FROM [tblEmployee]">
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" 
    ConnectionString="<%$ ConnectionStrings:DBCS %>" 
    SelectCommand="SELECT * FROM [tblEmployee] WHERE ([Id] = @Id)">
    <SelectParameters>
        <asp:ControlParameter ControlID="GridView1" Name="Id" 
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:SqlDataSource>

Now set the colour scheme of GridView1 and DetailsView1 to BrownSugar and run the application. DetailsView is rendered as an empty box. This is because we don't have any row selected in GridView1 intially. To correct this issue copy and paste the following code in webform1.aspx.cs
protected void Page_PreRender(object sender, EventArgs e)
{
    if (GridView1.SelectedRow == null)
    {
        DetailsView1.Visible = false;
    }
    else
    {
        DetailsView1.Visible = true;
    }
}

Detailsview can also be used to perform insert, edit, and delete. We will discuss about these in a later video session.