Click here to Skip to main content
Click here to Skip to main content

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 .

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


License

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.

Comments and Discussions

 
Generalnice article PinmemberSuresh Thakur3-Oct-07 2:03 
This is realy help full thanks
 
Suresh Thakur
Assign Infotech Pvt. Ltd., Noida
INDIA

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 1 Oct 2007
Article Copyright 2007 by Suresh Thakur
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid