Displaying Extended Details in a GridView Using an Ajax Pop-Up (Part 1)
Posted by: 4GuysFromRolla.com Headlines,
on 04 Jul 2007 |
View original
As web developers we are often tasked with building online reports. For ASP.NET 2.0 web
applications, the GridView control is commonly used to display report data. A common challenge in building reports is achieving the right balance
between readability and information. Users want to have all of the pertinent information available on one screen, but too much data dumped on
a single screen leads to information overload and makes the report difficult to digest. Oftentimes, a report displays the high-level information
and enables users to drill down into the details. One way to implement drill down details is to add a link to each item in the report that, when
clicked, takes the user to a page that shows the selected item's details. This approach works well if the details displayed require significant screen
real estate or if the user is likely to only want to view a particular item's details. If, however, a typical user needs to view the details for
many items, having to go to a separate web page to view each item's details can be counterproductive. An alternative approach is to have a window
appear on screen when mousing over a particular item that would show the item's details.
At work I was asked to build such a report interface: a GridView showing high-level details that, when moused over, show their details in an
on screen pop-up window. I decided to use Microsoft's ASP.NET AJAX framework to accomplish this task.
In this article, I'll show you how to build your own dynamically-generated pop-up window filled with extended information about an item in a
GridView. This is the first of a two-part article series. In this part we'll look at building the application architecture, which will consist
of a Typed DataSet and some custom classes. In a future installment we will look at implementing the Ajax-related functionality. Read on
to learn more!
Read More >