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

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

Introduction

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.

Overview

 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();
  dataSet.ReadXml(books);
  dgBooks.DataSource = dataSet;
  dgBooks.DataBind();
}        

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;
   changeText(arguments[x]);
    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";
    }
    else
    {
       prefix.visibility = "visible";
       prefix.fontSize = "16";
    }
}

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

  if (linkText.firstChild.nodeValue == "Show Details")
  {
    linkText.firstChild.nodeValue = "Hide Details";
  }
  else
  {
    linkText.firstChild.nodeValue = "Show Details";
  }
}
</script>
        

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") %>')">

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

George Wilburn

United States United States
No Biography provided

Comments and Discussions

 
QuestionEditable Detail Fields ? PinmemberTheDonSansone19-Jan-09 17:04 
GeneralProblem with DataGrid inside web user control PinmemberChuck Lane5-Aug-04 9:07 
GeneralRe: Problem with DataGrid inside web user control PinmemberChuck Lane6-Aug-04 9:45 
QuestionWhy didn't use a DataList??? Pinsussc_marius2-Mar-04 22:23 
GeneralShow first row details Pinmembergadgetfbi22-Jul-03 7:41 
QuestionShow Embeded DataGrid? PinmemberGKFlash17-Jul-03 4:58 
GeneralThanks! :cool: Pinmembermememe242-Jul-03 14:36 

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
Web02 | 2.8.140721.1 | Last Updated 8 Jul 2003
Article Copyright 2003 by George Wilburn
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid