TITLE tags for hyperlinks - little datagrid usability thing
[updated based on feedback from Rick and Fabrice]
Master / Detail pages are a snap to create with ASP.NET, but they can be frustrating on the end user. If the information you're looking for isn't on the master page, you end up clicking back and forth to find the record you want. From a selfish point of view, those unneeded round trips to the server are also a waste of server CPU and bandwidth.
So here's a simple little feature that can save some clicks - a "title" attribute for the edit links. Mouse over them to see what I'm talking about:
| Edit * |
Requestor |
Phone Extension |
Department |
| 200454378 |
Nathaniel Pemberton |
7012 |
Marketing |
| 200454379 |
Bart McKinley |
2000 |
CEO |
| 200454380 |
Nathaniel Pemberton |
7012 |
Marketing |
| 200454383 |
Walter Jennings |
4302 |
HR |
*mouse over Order ID for details
The idea is the same as an alt tag for images.
<a href=http://images.google.com/images?q=monkey title="Monkey pictures!">Click Here</a> = Click Here
Works in IE and Firebird. Haven't tested in Lynx.
+ Code to generate the datagrid above
<%@ Page language="c#" AutoEventWireup="true" EnableViewState="false" %>
<%@ Import Namespace="System.Data" %>
<script runat="server">
void Page_Load()
{
//Nothing exciting here - just creating a dummy datatable to bind to.
DataTable dt = new DataTable("Orders");
DataColumn col = new DataColumn("OrderID");
dt.Columns.Add(col);
col = new DataColumn("Department");
dt.Columns.Add(col);
col = new DataColumn("Requestor");
dt.Columns.Add(col);
col = new DataColumn("Extension");
dt.Columns.Add(col);
col = new DataColumn("RequestDescription");
dt.Columns.Add(col);
DataRow row;
row = dt.NewRow();
row["OrderID"] = "200454378";
row["Department"] = "Marketing";
row["Extension"] = "7012";
row["Requestor"] = "Nathaniel Pemberton";
row["RequestDescription"] = "I have some new ideas for the " +
"internal website. New color scheme and I want to try out " +
"some new fonts. I'd like this done today.";
dt.Rows.Add(row);
row = dt.NewRow();
row["OrderID"] = "200454379";
row["Department"] = "CEO";
row["Extension"] = "2000";
row["Requestor"] = "Bart McKinley";
row["RequestDescription"] = "MY COMPUTER IS MESSED UP AGAIN! " +
"I CAN'T TYPE LOWER CASE ANYMORE. I THINK I NEED MORE GIGAHURTS. " +
"CAN YOU GET ME A NEW ONE BEFORE MY 2PM MEETING?";
dt.Rows.Add(row);
row = dt.NewRow();
row["OrderID"] = "200454380";
row["Department"] = "Marketing";
row["Extension"] = "7012";
row["Requestor"] = "Nathaniel Pemberton";
row["RequestDescription"] = "Did you guys take down the page with the " +
"dancing clowns again? I love those guys! Put it back up ASAP!!!";
dt.Rows.Add(row);
row = dt.NewRow();
row["OrderID"] = "200454383";
row["Department"] = "HR";
row["Extension"] = "4302";
row["Requestor"] = "Walter Jennings";
row["RequestDescription"] = "Please remove all references to Nathaniel " +
"Pemberton from the corporate website. He has been let go.";
dt.Rows.Add(row);
dg.DataSource = dt;
dg.DataBind();
}
</script>
<html>
<body>
<form runat="server">
<asp:DataGrid runat="server" id="dg" AutoGenerateColumns="False" BackColor="#eeeeee" Width="85%" HorizontalAlign="Center" Font-Name="Verdana" Font-Size="10pt">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
<Columns>
<asp:TemplateColumn HeaderText="Edit *">
<ItemTemplate>
<a href="#" title="<%# DataBinder.Eval(Container.DataItem, "RequestDescription").ToString().Substring(0,75) %>...">
<%# DataBinder.Eval(Container.DataItem, "OrderID") %></a>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="Requestor" HeaderText="Requestor" />
<asp:BoundColumn DataField="Extension" HeaderText="Phone Extension" />
<asp:BoundColumn DataField="Department" HeaderText="Department" />
</Columns>
</asp:DataGrid>
<center><font size="-1">*mouse over Order ID for details</font></center>
</form>
</body>
</html>