Data Filtering to DetailsView Via GridView

Introduction

 

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 ..

 

Download

 

 

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

 

 

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 .

 

 

Technorati Tags: Data Filtering,DetailsView,GridView,Data Filtering to DetailsView Via GridView,Data Binding to GridView,List View