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 ..
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
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
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
Same as to Filter Data From GridView You can Use this Code Segment
note that in GridView1.Rows.Cells Rows and Cells Starting From 0 .