ASP.NET GridView Tutorial - Detailsview in – Part 37

Database, Information Technology

ASP.NET GridView Tutorial

301 Lessons

Detailsview in – Part 37

Link for csharp,,, dotnet basics and sql server video tutorial playlists

Link for text version of this video

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.

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

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;
DetailsView1.Visible = true;

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

    Access DataSource in AccessDataSource in Alert another gridview ascending asp net gridview access database c# bind xml to gridview data source controls datagridview datasource controls get data from access database gridview gridview bind to xml gridview edit gridview formatting gridview sqldatasource gridview xml c# gridview xml file ms access database example objectdatasource explained between bi-directional bidirectional bind xml file to gridview in binding xml file to gridview business objects C# c# accessdatasource c# data source object c# datagrid example c# get data from access database c# gridview sqldatasource c# sql data source connection string c# sqldatasource example c# sqldatasource selectcommand c# xslt example c# xslt transform xml document c# xslt tutorial cells changing data checkbox client-side code colspan CompareAllValues compute concurrency confirm ConflictDetection conflictdetection property content control controls convert xml node to attribute custom paging Data DataFormat String DataFormatString datagrid in datagrid in c# DataKeyNames dataset datasource datasource controls default paging delete delete confirmation delete data Deleting deleting data descending detailed data details view details view in DetailsView difference display Displaying displaying gridview document Drill Down Drilldown drilling down dropdownlist edit edit and update editing EmptyDataTemplate EmptyDataText event example Excel Export exporting footer footer row format formatting gridview at runtime Formatting gridview in code generate Grid View gridview gridview currency format gridview datasource xml file gridview date format gridview ms access database gridview retrieve templatefield value gridview RowDataBound gridview template gridview templatefield gridview templatefield get control GridViewDeletedEventArgs hierarchical data how how to display date in gridview without time How to get value from TemplateField in GridView how to pass data from gridview to another page in image field imagefield images implement implementing insert inside javascript jquery KeepInEditMode Merging. merge microsoft multiple rows nested nested gridview nesting no data no rows in datasource object datasource object datasource in objectdatasource objectdatasource in order OverwriteChanges page page numbers page size paging pdf properties read xml file with child nodes c# Repeater Retrieve ItemTemplate control value in Gridview row cells rowcommand rowdatabound rowdatabound event RowDataBound example RowDeleted event RowUpdated several rows show date only in gridview showing sort sort arrows sort images sortable Sorting sqldatasource sqldatasource in stored procedures summary data templatefield totals tutorial two or more rows Update update data Updated updating updating data Use use optimistic concurrency using validation Validation Controls web server when without without data source controls without datasource controls Word workbook working with xmldatasource in xslt basics xslt example xslt to transform xml to xml xslt transformation xslt transformation c# example