Click here to Skip to main content
13,294,840 members (74,034 online)
Click here to Skip to main content
Add your own
alternative version


93 bookmarked
Posted 1 Jul 2003

Showing and hiding details in a datagrid row

, 7 Jul 2003
Rate this:
Please Sign up or sign in to vote.
This article demonstrates how to show and hide query details in a datagrid


I wanted to find a way to show details of a datagrid row in the same row as opposed to binding a new query to a separate datagrid.  To do this I had to bind my query results to a datagrid, hide the results that I did not want displayed behind a style tag, and then toggle the style as needed to show or hide the results.


 Using a simple Page_Load event to bind Xml data to a datagrid and display the results.

public void Page_Load(Object sender, EventArgs e)
  string books = Server.MapPath("aspnetbooks.xml");
  DataSet dataSet = new DataSet();
  dgBooks.DataSource = dataSet;

Once the data is displayed, use the JavaScript below in combination with the datagrid to manipulate the unique Ids and show or hide the details.

Using the code

Javascript Code

This script first determines the browser version being used in order to then ascertain which method it should use to manipulate the elements in the HTML.  Next, it loops through the arguments and sets up an element object to change the visibility to hidden or visible.  The following code illustration shows the DataGrid itself and then explains the details behind calling the showDetails function.

<script type="text/javascript">
var action;
IE4 = (document.all && !document.getElementById) ? true : false;
NS4 = (document.layers) ? true : false;
IE5 = (document.all && document.getElementById) ? true : false;
NS6 = (!document.all && document.getElementById) ? true : false;

function showDetails(action)
   x = 0;
    if (IE4) { prefix = document.all(arguments[x]).style; }
    if (NS6 || IE5) { prefix = document.getElementById(arguments[x]).style }
    if (NS4){ prefix = document.layers(arguments[x]); }

    if (prefix.visibility == "visible")
       prefix.visibility = "hidden";
       prefix.fontSize = "0";
       prefix.visibility = "visible";
       prefix.fontSize = "16";

function changeText(link)
  link += "link";
  linkText = document.getElementById(link);

  if (linkText.firstChild.nodeValue == "Show Details")
    linkText.firstChild.nodeValue = "Hide Details";
    linkText.firstChild.nodeValue = "Show Details";

DataGrid Code

This datagrid is pretty simple.  autoGenerateColumns is set to False in order to manipulate the columns manually.  First, notice line #9.  This is where the showDetails function is called.  Using the DataBinder.Eval to bind a unique database record ID to each function; that is the same record ID used on line #20-#22 to set the id of a cell in the table and the same unique ID assigned to the "a href" tag except it has "link" appended to the ID to keep it unique. 

Notice that Row #14 has a style that sets the font-size to "0" and the visibility to hidden.  This is what the JavaScript above will toggle.  The Url is set to call "showDetails('UniqueID of the row')".  Once the function has performed browser detection, a call is made to another function: changeText('Unique ID of the row').  This function appends the "link" to the ID and changes the text to either "Show Details" or "Hide Details" by checking the innerText of the href tag.  The showDetails function then resumes by changing the visibility and font-size style according to it current state.

1.  <asp:DataGrid id="dgBooks" runat="server" Height="35px"

       autoGenerateColumns="False" BorderWidth="2px">
2.  <AlternatingItemStyle  forecolor="#99CC99"

       backcolor= "#FFEADE"></AlternatingItemStyle>
3.  <ItemStyle forecolor="#FFCC99" backcolor= "#99AA99"></ItemStyle>
4.  <Columns>
5.  <asp:TemplateColumn>
6.  <ItemTemplate>
7.  <table border="0" id="Table1">
8.  <tr>
9.  <td>
10. <a id='<%# DataBinder.Eval(
       Container.DataItem, "bookID") %>link' 

       href="javascript:showDetails('<%# DataBinder.Eval(
       Container.DataItem, "bookID") %>')">


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

George Wilburn
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionEditable Detail Fields ? Pin
TheDonSansone19-Jan-09 18:04
memberTheDonSansone19-Jan-09 18:04 
GeneralProblem with DataGrid inside web user control Pin
Chuck Lane5-Aug-04 10:07
memberChuck Lane5-Aug-04 10:07 
GeneralRe: Problem with DataGrid inside web user control Pin
Chuck Lane6-Aug-04 10:45
memberChuck Lane6-Aug-04 10:45 
QuestionWhy didn't use a DataList??? Pin
c_marius2-Mar-04 23:23
sussc_marius2-Mar-04 23:23 
GeneralShow first row details Pin
gadgetfbi22-Jul-03 8:41
membergadgetfbi22-Jul-03 8:41 
QuestionShow Embeded DataGrid? Pin
GKFlash17-Jul-03 5:58
memberGKFlash17-Jul-03 5:58 
GeneralThanks! :cool: Pin
mememe242-Jul-03 15:36
membermememe242-Jul-03 15:36 

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
Web03 | 2.8.171207.1 | Last Updated 8 Jul 2003
Article Copyright 2003 by George Wilburn
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid