Showing and hiding details in a datagrid row

• Download demo project - 2 Kb
• Download source - 2 Kb

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