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

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