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

• Download Detail.zip - 4.5 KB

Introduction

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')");
                //*******************End***********************************************
                 }
    }

Points of Interest

<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