How to make an ASP.NET Table row highlight and become clickable

4.7 (10 votes)

For those people who like to output their data to an asp:Table, highlighting the entire row and making it clickable can make it obvious to the user that some action is expected from them. This emulates the behaviour that can be found in some desktop applications. All that's needed for this is a bit of javascript, and the use of AddAttributes() for the table rows.

You will also need to get round the limitation of the fact that the <a> tag is not allowed around a table row, so here are the two javascript functions that perform the magic:

    
function highlight(tableRow, active)
{
if (active)
{
tableRow.style.backgroundColor = '#cfc';
}
else
{
tableRow.style.backgroundColor = '#fff';
}
}

function link(Url)
{
document.location.href = Url;
}

And here's the method that adds the javascript to each row of the table as it is rendered:

string connstring = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";
connstring += Server.MapPath("App_Data/NWind.mdb");
string query = "SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City]";
query += " FROM [Customers]";
OleDbConnection conn = new OleDbConnection(connstring);
OleDbDataAdapter da = new OleDbDataAdapter(query, conn);
DataSet ds = new DataSet();
da.Fill(ds, "Employees");
foreach (DataRow dr in ds.Tables[0].Rows)
  {
    TableRow trow = new TableRow();
    foreach (DataColumn dc in ds.Tables[0].Columns)
    {
      TableCell tcell = new TableCell();
      tcell.Controls.Add(new LiteralControl(dr[dc.ColumnName].ToString()));
      trow.Cells.Add(tcell);
  
      trow.Attributes["onmouseover"] = "highlight(this, true);";
      trow.Attributes["onmouseout"] = "highlight(this, false);";
      trow.Attributes["onclick"] = "link('edit.aspx?id=" + dr[0].ToString() + "');";
      HttpResponse myHttpResponse = Response;
      HtmlTextWriter myHtmlTextWriter = new HtmlTextWriter(myHttpResponse.Output);
      trow.Attributes.AddAttributes(myHtmlTextWriter);
      Table1.Rows.Add(trow); 
    }
  }
conn.Close();

You might also like...

Date Posted:
Last Updated:
Posted by:
Total Views to date: 91114

4 Comments

- James Piette

I recently implemented similar functionality on a site I'm building using ASP MVC. I was able to do this using CSS and jquery. I also was using an AJAX call to have a table in a left division post the data to the rightDiv (division with id="divRight".

After including jquery, put this script on the top of the page.
<script type="text/javascript">
function linkfunc(url) {
$(divRight).load(url);
}

Then declare the <tr> tag as follows. (replace the stuff in [] to match your controller call.)
tr class="highlight" onclick="linkfunc('<%= Url.Action("[controlleraction]", "[controllername]", new{/*id=model.id*/})%>');">

To have highlighting work, declare this in the .css file
.highlight:hover
{
background-color:yellow
}

- Mike

@James

Since I wrote this article over 3 years ago, I have been using jQuery too.

- Mindaugas Matulis

There is a much easier way to do this without javascript. Just when you create Table Row items you can simply change colore on attribute name like in previous example:

trow.Attributes["onmouseover"] = "this.bgColor = '#DCEAF3'";
trow.Attributes["onmouseout"] = "this.bgColor = '#FFFFFF'";

- Mike

@Mindaugas Matulis

Thanks, but you are still using Javascript.

This article is very old. I'd recommend managing this via jQuery or similar these days anyway.

Recent Comments

Gfw 03/02/2017 09:48
In response to Free SSL Certificates On IIS With LetsEncrypt
I have used WinSimple for about the last 9 months - works great. One thing that you want to make of...

Ted Driver 02/02/2017 13:24
In response to Free SSL Certificates On IIS With LetsEncrypt
This looks great is you have command line access to your web server - what about those of us on Is...

Carl T. 06/11/2016 05:43
In response to Server.MapPath Equivalent in ASP.NET Core
Very succinct and easy to follow. Worked perfectly the first time for me. Thanks!!...

Manoj Kulkarni 04/11/2016 05:47
In response to Entity Framework Core DbContext Updated
Great post....

Sivu 19/10/2016 08:21
In response to Entity Framework Core TrackGraph For Disconnected Data
Oh that's very very very nice ! Thanks for the write up Mike, much appreciated for the taking the to...

Mark 12/10/2016 16:42
In response to ASP.NET Web Pages vNext or Razor Pages
Although "Web Pages" was removed from the roadmap, has it just been renamed to "Razor Pages"?...

Satyabrata 12/10/2016 09:20
In response to Entity Framework Core TrackGraph For Disconnected Data
Nice article. Please write more articles featuring ASP.Net web pages. Thank you...

Julian 26/09/2016 14:27
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Fantastic, many thanks Mike! Had got half way down this road before finding your article - saved...

Abolfazl Roshanzamir 14/09/2016 05:36
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Nice article. Thanke you so much ....

cyrus 02/09/2016 15:12
In response to ASP.NET Web Pages vNext or Razor Pages
I've got some news. As Damian stated in this link: https://github.com/aspnet/Mvc/issues/5208 “We...