Yesterday I stumbled upon Ryan Scherf's Table Row and Column Highlighting. It's a slick solution to helping users read tabular data. I thought it would be nice to add that functionality to the ASP.NET. So I created a single function that would add Ryan's column and row highlighting code to our GridView control.

Before proceeding, take a look at the demo page.

Files Needed

On Ryan's demo site, you can find the crosshair javascript file (aka CSS/JavaScript Table Hilighting). You will also need a crosshair CSS file. I've modified his and posted below.

Crosshair.css

Place this file either in your App_Theme folder (if you are using themes), embed it in the head of the document or link to it externally.

/* Used with crosshairs.js */
.hoverHilight {
    background-color: #ffffc0;
    color: inherit;
    cursor: pointer;
}

.activeCellHilight {
    background-color: #c0dbff;
    color: blue;
}

AddCrossHairToGridView

After loading your GridView, make a call to the AddCrossHairToGridView function. It takes 5 parameters.

gv: The ID of the GridView Control you wish to add highlighting to.
top: How many rows from the top should not have highlighting.
right: How many rows from the right should not have highlighting.
bottom: How many rows from the bottom should not have highlighting.
left: How many rows from the left should not have highlighting.

I dropped the Javascript file inside the same folder in this example. Update the path in the RegisterClientScriptInclude line to point to whatever location you use.

protected void Page_Load(object sender, EventArgs e)
{        
   DBLoadGridView(); // You write this!
   AddCrossHairToGridView(gvExample,1,0,0,0);
}

public void AddCrossHairToGridView(GridView gv, int top, int right, int bottom, int left)
{
   System.Text.StringBuilder js = new StringBuilder();
   js.Append("<script type=\"text/javascript\" language=\"javascript\">");
   js.Append("initCrossHairsTable(\"" + gv.ClientID.ToString() + "\",");
   js.Append(top + "," + right + "," + bottom + "," + left + ");");
   js.Append("<");
   js.Append("/script>");

   Type t = this.GetType();
   if (!ClientScript.IsClientScriptIncludeRegistered(t, "CrossHairJS"))
       ClientScript.RegisterClientScriptInclude("CrossHairJS", "crosshairs0.3.js");

   if (!ClientScript.IsClientScriptBlockRegistered(t, "HighlightScript"))
       ClientScript.RegisterStartupScript(t, "HighlightScript", js.ToString());
}

Labels: CSS, GridView, Javascript

A developer will often get a requirement to query a database and return the results in an HTML table. If the number of records returned is a lot then the developer is asked to page the results (click here for the next 20 records). Paging is no fun, but it understandable that the user would not want to scroll to the point where they can't view the column headers. An ideal sitution is to return as much of the data as possible in format that the user can easily view and understand the data. Microsoft Excel allows users to fix column headers, this article explains how to do it HTML.

A Simple Solution

In HTML we can used a fixed width DIV to hold the data inside a TABLE. And we can restrict the height of the DIV to a pre-defined number of pixels. For space reasons, the examples below restrict the TABLE to 70 pixels. Setting the overflow attribute to auto will force the scrolling to take place inside the DIV. Now we can just code the column headers above the DIV in a separate TABLE. If the column header TABLE and the DIV have the same width it will appear as though the column headers are fixed.

<table width="400">
<tr>
<th>Name</th><th>City</th><th>1999 Sales</th><th>2000 Sales</th><th>2001 Sales</th>
<tr>
</table>

<div style="width:400; height:100; overflow:auto;border:" id="dataList">
<table width="380">
<!-- Add records here -->
</table>
</div>

Example 1

Name	City	1999 Sales	2000 Sales	2001 Sales

Getting the Columns Straight

In the above example the columns are a little crooked. They don't exactly line up. I tried use javascript to calculate the width of the data cells in order to draw fixed width column headers, but I couldn't get it to work. If anyone has been able to to do this please email me the code. In order for the column headers to line up straight, I did it the old-fashioned way: I hard coded the width of the table cells to match the width of the column headers.

Example 2

This is the same table with fixed width cells.

Name	City	1999 Sales	2000 Sales	2001 Sales

More Tips

Sometimes sizing everything perfectly can be difficult, especially if the data varies in length. Here are a few more tips to help achieve an Excel-like table in HTML.

table-layout:fixed - Dianliang Zhu alerted me to this CSS tag. By adding STYLE="table-layout:fixed;" to our table we can contain the browser cell to the width we define. However, if we don't define our cell widths, it will use the width of the first cells to determine the table layout. This is an excellent tag to use, so be sure to define the cell widths.

Fixed-Width Fonts - Counting characters can be a pain, especially when the size of each character varies in width. To eliminate this possibility consider using a fixed-width (aka Monospace) font such as Courier for the table.

Server-Side Data Trimming - To prevent long pieces of data from pushing out or streching a cell, perform some server-siding trimming. Do you need the full company name or would the first 30 characters be enough? (EX: companyName = Left(companyname,30))

Example 3 - Using More Tips

Last Words

As expected, not every browser supports the overflow feature. The ideal use of this would be for a corporate Intranet where users were restricted to a one standards-compliant browser.

This article was first written in 2002. For a different solution see Cross-browser scrolling tbody.

Labels: CSS, HTML

Back in the day developers often created a separate web page to host the printer friendly version of content. The print friendly page stripped the large headers, footers, side bars and usually advertising. Sometimes the font would be changed from a screen readable font to a paper readable font. Using CSS we can accomplish these goals without even having to do a page refresh. If you are unclear so far, do a Print Preview on this page. You'll see the header is gone. The side bar has been removed. And the content now fills the width of the screen, which means less pages to pick up at the printer. I could go further with stylesheet by changing all the font colors to black to save your color ink cartridges.

Print Friendly Overview

Create a page that is XHTML compliant. Place each section (header, footer, content, sidebar, etc) in it's own DIV with a unique ID. Now hide the sections you don't want to go to the printer using display: none;. You'll probably hide every section except the content, although you may wish to keep the footer for copyright purposes. The last step is to perform minor tweaks to get margins how you like and any color adjustments. Upload the CSS file and add the reference using a media="print" attribute.

<link rel="stylesheet" media="print" type="text/css" href="print.css"/>

Labels: CSS