Click here to Skip to main content
13,256,590 members (55,360 online)
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 1 Oct 2007

Show Master Detail page in grid veiw using details view and java script or without post back

, 1 Oct 2007
Rate this:
Please Sign up or sign in to vote.
This article solves problem of showing detail page in grid view without post back of page , using java script. Developer can use any control like data list , repeator, form veiw or any custom logic to view information in detail page, using the same technique .


How to show detail page in grid view inside a row using java script.

Using the code

Unzipe the code and open files in VS2005 web application.Use sql server as database server, here I have used pubs database , author table to show authers details.

Update follwing connection string settings in web.config:

//  <add providername="System.Data.SqlClient" connectionstring="Data Source=Server Name;Initial Catalog=pubs;User ID=;Password=" name="pubsConnectionString" /> 
//<add providername="System.Data.SqlClient" connectionstring="Data Source=Server Name;Initial Catalog=pubs;User ID=;Password=" name="pubsConnectionString2" />

Default.aspx.cs file.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
            if (e.Row.RowType == DataControlRowType.DataRow || e.Row.RowType == DataControlRowType.Separator)

                //*******************Code to show/Hide row record***********************
                //Url of the detail page, auth_id is the id of auther
                String Url = "Detail.aspx?auth_id=" + GridView1.DataKeys[e.Row.RowIndex].Value;
                //Find the link button
                HtmlAnchor lnkShowHideDetail = (HtmlAnchor)e.Row.FindControl("lnkSHDetail");
                // Add client side attribute "index" in each row of grid 
                // this attribute give row number of below which detail has to be shown
                e.Row.Attributes.Add("Index", e.Row.RowIndex.ToString());
                // Add same attribute "index" in link button , with same value
                //To identify whose row, link button clicked
                lnkShowHideDetail.Attributes.Add("Index", e.Row.RowIndex.ToString());
                // add mode attribute in link button to know the status of detail page <shown />
                lnkShowHideDetail.Attributes.Add("mode", "HIDE");
                //At last register client side onclick   event and the name of java function 
                //which will open the dealil page in grid 
                //Parameter: grid view client id, url of detail page,link button object,caption1,caption2
                lnkShowHideDetail.Attributes.Add("onclick", "HideShowDetails('" + GridView1.ClientID + "','" + Url + "',this,'Show Detail',' Hide Detail')");

Points of Interest

Using the above technique I have tried to open deatil page in grid view without doing postback i.e. without going throug complete page life cycle of container page ,using seperate handler to fetch details from database server and to show the results, hence try to reduce the rendered page size
<pre />


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Suresh Thakur
Web Developer FCS Software Solutions Ltd., Noida ( INDIA )
India India
Love to develope web based applications using Microsoft technologies.

You may also be interested in...


Comments and Discussions

Generalnice article Pin
Suresh Thakur3-Oct-07 3:03
memberSuresh Thakur3-Oct-07 3:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171114.1 | Last Updated 1 Oct 2007
Article Copyright 2007 by Suresh Thakur
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid