Click here to Skip to main content
13,145,608 members (37,226 online)
Click here to Skip to main content
Add your own
alternative version


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

Screen Shot1

Screenshot - Sh2.jpg

Screen Shot2

Screenshot - Sh1.jpg

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

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170915.1 | Last Updated 1 Oct 2007
Article Copyright 2007 by Member 20021981
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid