Matt Berseth

I really like the grid in Google Analytic's 'Top Content' grid (see below).  I like it because it incorporates a number of useful grid features without taking up too much room.   

I thought it would be interesting to see what it would take to have an ASP.NET GridView render in a similar fashion.  In particular, I was interested in incorporating the following features

1. Include each records row number as the first column in the table
2. Improve the column sort presentation.  The grid in the image above is currently being sorted by the Pageviews column.  Notice how there is not only an icon that indicates the sort order (ascending or descending), but the column becomes a darker shade of gray (both header and data rows)
3. Add a 'Go to' textbox that will take the user to the specified page
4. Add a DropDownList for changing the page size
5. Include the current page offset as a status message (i.e. '1 - 10 of 69') 
6. Provide 'next'/'previous' navigation between pages

Live Demo | Download

I followed these steps to create this sample.

Create the GridView and ObjectDataSource

To start, I created a very simple GridView that binds to an ObjectDataSource which provides read-only access to the rows contained in the standard Northwind.dbo.Customers table.  To remove the dependency on having an actual database, I extracted the customer rows and put them into an xml file.  Next, I created a CustomerDataObject class that sits on top of the xml file and defines the Select method the ObjectDataSource uses to fetch the data.  Here is the markup for the ObjectDataSource and the GridView.  If you download the sample project you can take a look at the CustomersDataObject.  To avoid full postback's, I placed the GridView inside an UpdatePanel.

<asp:ObjectDataSource ID="odsCustomers" runat="server" SelectMethod="Select" TypeName="CustomersDataObject" />

<asp:GridView ID="gvCustomers" runat="server" DataSourceID="odsCustomers" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField HeaderText="ID" DataField="customerid" SortExpression="customerid" />
        <asp:BoundField HeaderText="Company" DataField="companyname" SortExpression="companyname" />
        <asp:BoundField HeaderText="Contact Name" DataField="contactname" SortExpression="contactname" />
        <asp:BoundField HeaderText="Contact Title" DataField="contacttitle" SortExpression="contacttitle" />
        <asp:BoundField HeaderText="Country" DataField="country" SortExpression="country" />
        <asp:BoundField HeaderText="Phone" DataField="phone" SortExpression="phone" />
    </Columns>
</asp:GridView>

Include Row Number's

After I had the basic GridView created and operational, I implemented the first feature: displaying the row number of each row in the grid.

Because the GridViewRow object exposes a property for this purpose we can use a databinding expression to implement this feature directly within a standard TemplateField. 

<asp:GridView ID="gvCustomers" runat="server" DataSourceID="odsCustomers" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="30px">
            <ItemTemplate>
                <%# Convert.ToInt32(DataBinder.Eval(Container, "DataItemIndex")) + 1 %>.
            </ItemTemplate>
        </asp:TemplateField>
        ...
    </Columns>
</asp:GridView>

Improve the Column Sort Presentation

Like mentioned earlier, the Google Analytics grid has 2 nice features related to column sorting. 

The first is that an ascending or descending icon is displayed in the column header of the column that is currently being sorted by.  The second is that the complete column changes color to a darker gray making the sort selection even more obvious.  To implement both of these features I handled the GridView's RowDataBound event, looked up the column that will be used for the sort and update the style of the corresponding header cell.  The code below shows this.  There are a couple of things to note:

1. I am finding the DataControlField by matching exactly on the GridView's SortExpression property.  This technique will not support grid's that allow multiple levels of sorting (i.e. ID asc, LastName desc).
2. This loop is executed for every row within the current page of data.  For production, you should cache the cellIndex value within an instance member variable on the page that contains the gridview
3. For the HeaderRow, I check the SortDirection of the GridView to determine which style to assign the the cell.  The style contains the reference to the arrow icon's
4. For DataRow's I see if the row is an alternating row or not before I assign the style to the cell.

protected void GvCustomers_RowDataBound(object sender, GridViewRowEventArgs e)
{
    GridView gridView = (GridView)sender;

    //  is the grid currently being sorted
    if (gridView.SortExpression.Length > 0)
    {
        //  find the index of the header cell that is causing the sort
        int cellIndex = -1;
        foreach (DataControlField field in gridView.Columns)
        {
            if (field.SortExpression == gridView.SortExpression)
            {
                cellIndex = gridView.Columns.IndexOf(field);
                break;
            }
        } 

        //  if we found it, update the style of the header and datarows
        //  based on the sort
        if (cellIndex > -1)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                //  this is a header row,
                //  set the sort style
                e.Row.Cells[cellIndex].CssClass = 
                    gridView.SortDirection == SortDirection.Ascending ? "sortascheaderstyle" : "sortdescheaderstyle";
            }
            else if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //  this is a data row
                e.Row.Cells[cellIndex].CssClass = 
                    e.Row.RowIndex % 2 == 0 ? "sortalternatingrowstyle" : "sortrowstyle";
            }
        }
    }
}

Add a DropDownList for Toggling PageSize

Now that the sorting features have been handled we can move onto the paging.  The first feature here is allowing the user to select the page size. 

This is a dropdownlist that contains the page sizes that we are allowing the user to choose from.  We can add this feature by creating a PagerTemplate for our GridView.  Within this template we can add a Label and DropDownList for handling the presentation.  Lastly, we can set handle the SelectedIndexChanged of the DropDownList where we will update the PageSize property on the GridView with the SelectedValue.  Make sure to set the AutoPostback property to true so a postback is triggered when the selected index changes.

<PagerTemplate>
    <asp:Label runat="server" Text="Show rows:" />
    <asp:DropDownList ID="ddlPageSize" runat="server" AutoPostBack="true" OnSelectedIndexChanged="GvCustomers_SelectedIndexChanged">
        <asp:ListItem Value="5" />
        <asp:ListItem Value="10" />
        <asp:ListItem Value="15" />
        <asp:ListItem Value="20" />
    </asp:DropDownList>
</PagerTemplate>

protected void GvCustomers_SelectedIndexChanged(object sender, EventArgs e)
{
    DropDownList dropDown = (DropDownList)sender;
    this.gvCustomers.PageSize = int.Parse(dropDown.SelectedValue);
}

Include the Current Page Information

The next feature on my list is to allow the user to see what page they are currently on as well as go directly to a specific page by typing the page number in a textbox.

I decided to implement this slightly different than Google's.  I combined the status and goto feature into a single element.  To do this I again used the PagerTemplate.  First I added an asp:TextBox for the 'goto' feature.  Then I added an asp:Label for holding the total number of pages.  Next, I went back to the RowDataBound event handler I created earlier and included a condition that checks to see if the current row is a PagerRow.  If it is, I fetch the controls from the pager row and update their values with the PageCount, PageIndex and PageSize properties of the GridView.  Lastly, I make sure the TextBox is setup to AutoPostback and I handle the TextChanged event to update the PageIndex to the value that is entered by the user.

Here is the markup and code for these items.

</PagerTemplate>
    Page 
    <asp:TextBox ID="txtGoToPage" runat="server" AutoPostBack="true" OnTextChanged="GoToPage_TextChanged" />
    of
    <asp:Label ID="lblTotalNumberOfPages" runat="server" />
</PagerTemplate>

protected void GoToPage_TextChanged(object sender, EventArgs e)
{
    TextBox txtGoToPage = (TextBox)sender;
    
    int pageNumber;
    if (int.TryParse(txtGoToPage.Text.Trim(), out pageNumber) && pageNumber > 0 && pageNumber <= this.gvCustomers.PageCount)
    {
        this.gvCustomers.PageIndex = pageNumber - 1;
    }
    else
    {
        this.gvCustomers.PageIndex = 0;
    }
}

Move to the Next and Previous Pages

The final step is to add the Next and Previous paging buttons.  Again, we can leverage the PagerTemplate for presentation, but we can also use the 'Page' GridView command for handling moving the grid to the next and previous rows.  When we create our buttons, all we have to do is set the CommandName for both to 'Page' and then set the CommandArgument for the move previous to 'Prev' and 'Next' for the move next button.  If you are not familiar with these commands, you can read more about them here.

<asp:Button runat="server" CommandName="Page" ToolTip="Previous Page" CommandArgument="Prev" CssClass="previous" />
<asp:Button runat="server" CommandName="Page" ToolTip="Next Page" CommandArgument="Next" CssClass="next" />

Conclusion

Here is a quick shot of the final product.

That's it.  Enjoy!