Back in the old days of RPG, most of our apps revolved around the subfile. The subfile presented rows of data that we (mostly) used for navigation and selection purposes. The work-with panel, with which every IBM i user is intimately familiar, is the most canonical example of this type of navigation/selection purposes.

Today, in Windows apps, Web apps, even mobile apps, the navigational list is still a very popular user interface idiom. It certainly looks a little different, but the core facilities are the same. In AVR for .NET Web apps, the GridView is probably the most frequently-used way to implement such a navigational list. It's easy to configure and populate with data.

Paged ASP.NET GridView

ASP.NET GridView paged grid

A very typical use of the GridView is as a paged grid as shown above. Used this way, there is usually at least a "next" operation available to show the next "page" of rows (there may also be other paging operations available such as "first" or "position-to"). In this case, there is a fixed number of rows read from the server and then assigned to the grid. In the example in the figure above there are nine rows per "page."

The basic ASP.NET markup for a grid like this is shown below (the classes for the GridView all relate to Bootstrap CSS-imposed cosmetics):

<asp:GridView ID="gridviewCustomers" ClientIDMode="Static" runat="server" 
              AutoGenerateColumns="False"  
              CssClass="table table-striped table-hover table-condensed small-top-margin">
    <Columns>
        <asp:BoundField DataField="CMCustNo" HeaderText="Number" >
            <HeaderStyle Width="15%" />
        </asp:BoundField>
        <asp:BoundField DataField="CMName" HeaderText="Name" />
    </Columns>
</asp:GridView>

Scrolling the ASP.NET GridView

Many programmers don't like the fixed paging from the example above. They would like to make the GridView scroll. That actually doesn't need much code and it's a pretty easy thing to do. For this example, let's assume we want to fetch 100 rows at a time, but only show nine of them at any one time. The user is able to scroll through these rows as shown below.

ASP.NET GridView scrolling grid

To implement this scrolling grid, do these three things:

  1. Change the server-side code to write 100 rows to the GridView's DataSource. You could write a lot more than 100 rows if you want to, but remember that as that number increases, so does the size of your resulting HTML page and the time it takes to load.

  2. Modify the ASP.NET markup by surrounding the GridView's declaration with a div tag as shown below:

    <div class="scrolling-table-container">
       <asp:GridView ID="gridviewCustomers" ClientIDMode="Static" runat="server" 
                     AutoGenerateColumns="False"  
                     CssClass="table table-striped table-hover table-condensed small-top-margin">
           <Columns>
               <asp:BoundField DataField="CMCustNo" HeaderText="Number" >
                   <HeaderStyle Width="15%" />
               </asp:BoundField>
               <asp:BoundField DataField="CMName" HeaderText="Name" />
           </Columns>
       </asp:GridView>
    </div>
    

    Be sure to include the "scrolling-table-container" class name for the div tag.

  3. Add this CSS to your app:

    .scrolling-table-container {
        height: 378px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    

    This CSS is adds the scrolling capability to the GridView. In this example, the horizontal scroll bar (the x axis's scroll bar) is hidden. You'll need to figure out what height the scrolling container should be for your grid. It will take a little trial and error.

That's the good news

Wasn't that easy! Now you have a scrolling grid. Alas, there is a downside: the heading scrolls with the data rows. Once the user scrolls down even a single row, the header rolls out of view. This is shown in the figure below.

The header scrolled out of view.

This scrolling header presents quite a challenge to resolve. When you Google "HTML fixed table header" or something similar you'll see that several enterprising programmers have tackled the challenge. You'll also find at least three or four jQuery plugins that claim to solve the problem.

I've tried most of the techniques and plugins available and haven't found any that work across all browsers and GridView configurations. For example, several of the techniques require that the width of all columns be fixed. If you find a general-purpose solution you think is worth using, please let us know.

Is it worth the trouble?

This veers into subjective territory pretty quickly, but in my opinion, the gyrations required to fix the heading issue render this technique interesting but not usable. There are other issues as well. If you're working with a customer master file with tens of thousands of rows, you simply can't put all of them in the grid at once. So even though you've offered the user the ability to scroll through a subset of the total rows, except for the all but the smallest files, you still need some paging mechanism to get the next 100 (or whatever) rows—and dual-model (paging and scrolling) would probably be confusing to most users.

Another consideration to keep in mind is that most of the techniques that provide a solution, or even part of a solution, to the disappearing heading challenge is that their techniques would likely very negatively affect any carefully designed responsive CSS layouts.

Perhaps the best use case for the technique is in those cases where you know the file is small enough to load all at once in the grid. Consider customer backorders, for example. If you know that virtually no customer ever has more than 500 backorders, you could put all of those orders in the grid without the need for a further paging mechanism. Just remember that you still have the scrolling heading challenge!

Is there a better alternative for a scrolling grid?

With any challenge like this, ASP.NET is really out of the loop. The issue is that independent of what technology you're using, by the time a page gets rendered, what you're left trying to resolve is a CSS/HTML5 challenge. I'm not aware of any better way to address the issue using standard GridView (or other) ASP.NET controls.

There is an alternative approach to consider, but it's not one that would simply snap into your existing ASP.NET pages. The jQuery DataTables plugin does a great job rendering a client-fetched chunk of Json data into a grid. It allows column sorting, scrolling, client-side paging, filtering, and lots of other goodies.

jQuery DataTables plug-in in action

However, it requires a little more effort than a traditional ASP.NET server side control to use, so it's not a simple snap-in solution for existing ASP.NET pages. However, you should check out the DataTables plug-in and think about it for future use. It's a keeper! We'll revist this topic in upcoming newsletter issue and show how to use it with AVR for .NET.