Data Filtering to DetailsView Via GridView



We going to need a data table in order to work with this example. in here I’m using StudentResult as my data Table. you can download example files using the  Above link ..






Step :1


First of all Fire-up Visual Studio and create a new Website select the Language as Visual C#. then hit ok button.. then add a data base to your project. and insert any data you want to display. in my case I’m using SqlExpress Database to store all my data. because its easy to use any I can interact with my database easily via visual studio.



Then add a GridView and a DetailsView  to the designing area. you will see something like this..




I have a Grid View at the top

and a Details view at the bottom













now we need to bind data in to GridView. to do that you can use smart tag as shown below..




then configure your data grid using it or you can drag a SqlDatasource  and configure it and Bind it to GridView.  by selecting your data source..




Now elect New Data source and select database from pop-up window


 Selecting data Source


in next window hit New connection Button  and Select your Sql Server Or Sql Data Base file depend on your Requirement.. in this scenario I’m going to use a  SqlExpress database File(Database.mdf) that contain all my data.


So in Add New Connection Window As Data Source I’m Going to Select  Microsoft SQL Server Database File (SqlClient)  and then locate my database. note if you create your database via Visual Studio you must navigate to project’s App_Data folder and select your database. after that hit Test connection button and you must get a message saying Connection Successful ..


then you will notice that your database connection string has been created .

and your Connection String should be look like this


Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True




then hit Next button and IDE will ask you to save then ConnectionString.

this string will be stored in your web.config file so that later whenever you want you can retrieve it in your program as a String.


Then in very next window Select the table you want to  extract data and then  Select the columns you want to display. in this scenario I’m using all the columns as I need to display detailed information about the Student. you can define custom SQL Query or Procedure according to your need




 Ok now all set. if you want to test your Query you can hit next button and test it. or else you can hit finish button. now you will see that




Now You will notice that Your GridView Has been Updated. in smart drop down Select Enable Selection.


and then Select edit columns.




you will notice that I have removed most of the Fields. I only keep SID Field and Name Field. and there is a especial Field called Select.  the Select field is the link that we are going to use to Filter Data. if you cant see Select field in your Project. you must Click the Smart Tag in GridView and then Select Enable Selection.


now your GridView Should be look like this.



We have 2 fields SID and Name, And a Special Field Called Select.


now we are done with the GridView. the next step is to configure the DetailsView.


simply click the smart tag that appear on the top right corner of the DetailsView and select sqlDatasource1 as data source. you will notice that for both DetailsView and GridView is Using the same data source.




Up to this point we have Configured DetailsView and GridView with SqlDatasource1

now we are going to enable DetailView’s  selected page index via GridView’s selected index. that means when User Click on GridView’s item DetailsView will Show all the Relevant information about the Selected Field.

to enable that simply double click on Select field on GridView or Go to the GridView’s Property –>then In Event Category Select  SelectedIndexChanged Property Double click it and Enter Following Code segment


Code Snippet
  1. protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
  2.     {
  3.         DetailsView1.PageIndex = GridView1.SelectedIndex;
  4.     }



Now you are all Set and Good to Go. just hit the Debug button and you will see browser get start and your page lodes with something like this.




Whenever you click the Select Field in GridView, Information in Details view Changed.


if you want to filter data from DetailsView you use this code Segment

Code Snippet
  1. String myStr = DetailsView1.Rows[1].Cells[1].Text;


Same as to Filter Data From GridView You can Use this Code Segment

Code Snippet
  1. String myStr = GridView1.Rows[1].Cells[1].Text;


note that   in  GridView1.Rows[1].Cells[1]  Rows and Cells Starting From 0 .




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.