I have long had a problem with using grids to display data to the user. I have an even bigger problem with editing on a grid. A grid is easy to implement for a developer, and this is normally why developers use them. However, a grid is normally not the best interface for a user. Now, note that there are always exceptions, but these should be the exception and not the rule. There are many reasons why a grid is not suitable for user consumption.

A grid presents too much data on the screen so the user’s eye has too much to try to concentrate on
A user will get much more tired at the end of the day using a grid as opposed to other display types
The user cannot distinguish between the data in each column since each column is very uniform and nothing stands out
The header for the data can scroll out of sight and thus the user can no longer distinguish what data is what in each column

The above is just some of the reasons why a grid should not be the appropriate choice for displaying a list of data to the user. Just take a look at Figure 1 and then take a look at Figure 2 and see which one you think is easier to read.

Figure 1: The normal GridView control

Figure 2: Using a Template will make your GridView easier to read for the user

Now, both of the above .aspx pages use a GridView control. However, the version of the GridView shown in Figure 2 uses a TemplateField to layout each row of data in the GridView. The version shown in Figure 1 uses just the normal column controls in a GridView.

Each of the above GridView controls use a SqlDataSource object to retrieve data from the SalesLT.Customer table in the AdventureWorksLT sample database. This SqlDataSource object is shown in the code below:

<asp:SqlDataSource
       ID="custData"
       runat="server"
       ConnectionString="<%$
          ConnectionStrings:AdvWorksConnectionString %>"
       SelectCommand="SELECT * FROM SalesLT.Customer">
</asp:SqlDataSource>

The first GridView control uses a couple of ButtonField controls for the Edit and Delete hyperlinks shown in the first two columns, followed by BoundField controls to display each column of data. The first GridView source is shown in the code below but has all the formatting removed to keep the source simple.

<asp:GridView>
 <Columns>
  <asp:ButtonField CommandName="Edit" Text="Edit" />
  <asp:ButtonField CommandName="Delete" Text="Delete" />
  <asp:BoundField HeaderText="Company Name"
                   DataField="CompanyName" />
  <asp:BoundField HeaderText="First Name"
                   DataField="FirstName" />
  <asp:BoundField HeaderText="Last Name"
                   DataField="LastName" />
  <asp:BoundField HeaderText="Email Address"
                   DataField="EmailAddress" />
  <asp:BoundField HeaderText="Phone"
                   DataField="Phone" />
 </Columns>
</asp:GridView>

The second version of this GridView uses a TemplateField control within a single column in the GridView. In this TemplateField you can define any HTML you want. With just a little creativity you can create a much better layout than Figure 1.

The reasons the second version of the grid is better than the first are 1) The most important piece of data, the Company Name, is in a larger font than the other data that is less important; 2) You keep the labels close to the data as opposed to in headers on the grid that will eventually scroll out of sight; 3) Having the data go top left to bottom right in terms of importance is how most people in the western culture tend to process data.

The HTML code to create this version of the GridView is shown below. Again, all of the formatting code has been removed to keep the source code simple.

<asp:GridView ShowHeader="false">
 <Columns>
  <asp:TemplateField>
   <ItemTemplate>
    <div style="border: 1px solid gray; margin: 12px">
     <div style="font-size: x-large">
      <%# DataBinder.Eval(Container.DataItem,
                               "CompanyName") %>
     </div>
     <div>
      Contact:
      <%# DataBinder.Eval(Container.DataItem,
               "FirstName")%>&nbsp;
            <%# DataBinder.Eval(Container.DataItem,
                "LastName")%>&nbsp;&nbsp;
           (<%# DataBinder.Eval(Container.DataItem,
                "EmailAddress")%>)
     </div>
     <div>
      Phone:
      <%# DataBinder.Eval(Container.DataItem, "Phone")%>
     </div>
     <br />
     <div>
      <asp:Button ID="btnEdit" Text="Edit"
              CommandArgument='<%#
                DataBinder.Eval(Container.DataItem,
                                "CustomerID")%>'
            CommandName="Edit" runat="server" />
      <asp:Button ID="btnDelete" Text="Delete"
              CommandArgument='<%#
                DataBinder.Eval(Container.DataItem,
                                "CustomerID")%>'
              CommandName="Delete" runat="server" />
     </div>
    </div>
   </ItemTemplate>
  </asp:TemplateField>
 </Columns>
</asp:GridView>

As you can see, the second version will take a little more thought and a little more HTML code, but your users will thank you.

Summary

Next time you are designing how to display a lot of data to your users, really think about how you can make this display simpler. Normally all it takes is a little discussion with your user to find out what data is most important. That data should be made to stand out in your list. You can still use a GridView control, but take advantage of the TemplateField control and HTML to create a list that really works for your user. Remember, your user is the one that has to live with your application day in and day out. You want them thanking you at the end of the day, not cursing you!

NOTE: You can download this article and many samples like the one shown in this blog entry at my website. http://www.pdsa.com/downloads. Select “Tips and Tricks”, then “An Alternate Approach to a GridView” from the drop down list.

Good Luck with your Coding,
Paul Sheriff

** SPECIAL OFFER FOR MY BLOG READERS **
We frequently offer a FREE gift for readers of my blog. Visit http://www.pdsa.com/Event/Blog for your FREE gift!