What are some ASP.NET GridView performance improvement opportunities?

Question

I have an ASP.NET application that is fairly basic. It queries some data and displays the data in a GridView (0 - 2000 or so records possible). I've been trying to find some ways to make it zippier, best practices, etc. as it seems to be a little sluggish while the GridView is being rendered. I've seen some threads on utilizing CSS vs. setting all the styles directly on the GridView, but I'm not sure how this would look.

This is what the GridView looks like right now...

<asp:GridView ID="gvResults" runat="server" DataKeyNames="ORDNO" AutoGenerateColumns="False"
    CellPadding="4" ForeColor="#333333" OnSelectedIndexChanged="gvResults_SelectedIndexChanged"
    Width="100%" OnRowDataBound="gvResults_RowDataBound" meta:resourcekey="gvResultsResource1">
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    <Columns>
        <asp:BoundField DataField="CSTNO" HeaderText="CUST" meta:resourcekey="BoundFieldResource1" />
        <asp:BoundField DataField="ORDNO" HeaderText="RMA NUMBER" meta:resourcekey="BoundFieldResource2" />
        <asp:BoundField DataField="CSTORD" HeaderText="CUST PO NUMBER" meta:resourcekey="BoundFieldResource3" />
        <asp:BoundField DataField="ORDDTE" HeaderText="ORDER DATE" meta:resourcekey="BoundFieldResource4" />
        <asp:BoundField DataField="INVDTE" HeaderText="INVOICE DATE" HtmlEncode="False" meta:resourcekey="BoundFieldResource5" />
        <asp:CommandField ShowSelectButton="true" ButtonType="Link" meta:resourcekey="CommandFieldResource1"  />
    </Columns>
    <EditRowStyle BackColor="#999999" />
    <EmptyDataTemplate>
        <span style="color: Red;">
            <asp:Literal ID="litErrorNoRMAFound" runat="server" EnableViewState="False" meta:resourcekey="litErrorNoRMATagsFoundResource1"
                OnInit="litErrorNoRMAFound_Init"></asp:Literal>
        </span>
    </EmptyDataTemplate>
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#3494CC" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>

Thanks in advance, for any of your ideas/comments.

EDIT
Requirements do not allow for paging of the data. I am also looking for specific information on CSS utilization and the GridView...

Answer 1

Enable paging will work ;)

Answer 2

Is viewstate enabled? That could be a lot of hidden data.

Answer 3

You answered it yourself - zip it to make it zippier. Use a compression http handler.

Answer 4

A few ideas:

• Eliminate viewstate if possible.
• If you're using IIS6 or better, consider enabling compression.
• Enable paging on your GridView to keep request times down.
• Make sure your deployed production solution is release-compiled with no rogue debugging or tracing directives

Answer 5

Server Side Paging, in the gridview it's Custom paging...

Answer 6

You could try using server-side viewstates. It puts a bit more load on the server, but page loading / updating should be much faster.

Answer 7

If you're not using paging (as mentioned in a comment), consider going to a DataList or even a Repeater to reduce the overhead of the object itself.

Answer 8

You could output the first X items, then when the page has loaded fetch the next X items and so forth. This would probably make the page seem snappier for the end user.

You should also investigate what exacly makes the page slow, also check if the database query could be optimized using indexes or something.

Answer 9

You'll want to enable paging in order to avoid a situation where you are rendering hundreds of records to the page. In essence, you'll use the Page Controls in order to move through records rather than the scroll bar.

A related option that can help a lot is to use an ObjectDataSource that retrieves only those records that the grid wants to display. This uses the new ROW_NUMBER() construct in SQL Server. Here is an example of an ObjectDataSource method that retrieves a specific range of records. It uses my DAL but you should be able to get a pretty clear idea:

    [DataObjectMethodAttribute(DataObjectMethodType.Select, true)]
    public List<SelectClassData> GetList(string sortType, int startRowIndex, int maximumRows)
    {
        if (!BusinessUtilities.SQLSafe(sortType))
            throw new Exception("Illegal value in request (unsafe).");
        startRowIndex++;
        int EndRow = startRowIndex + maximumRows;
        using (BSDIQuery qry = new BSDIQuery())
        {
            if (sortType.Length == 0)
                sortType = "Title";
            return
                qry.Command(
                    "With OrderedClassEvent as (Select ClassID, Title, StartDate, EndDate, ROW_NUMBER() OVER (ORDER BY " + sortType + ") as RowNum From ClassEvent)")
                    .Append(" Select ClassID, Title, StartDate, EndDate From OrderedClassEvent Where RowNum Between @StartRow AND ").ParamVal(startRowIndex)
                    .Append("@EndRow ").ParamVal(EndRow)
                    .Append("Order By RowNum")
                    .ReturnList<SelectClassData>();
        }
   }

With respect to using CSS, etc. that will not make the grid zippier but it will permit you to define the Grid attributes (e.g. FooterStyle, HeaderStyle, etc.) in a "Skin" file that you'll tuck away in an theme directory. It is optional but you could also define the styles for each attribute using CSS. The skin file will show a "template" GridView with the CssClass for each attribute. When you refer create your grid, you'll refer to the Skin file and then just leave out all of the attribute definitions found in that file (the gridview won't need them because it knows what to do based on the skin). This is especially great if you want to have all of your grids look the same.

Answer 10

Using CSS should reduce the size of the markup.

http://www.jigar.net/howdoi/viewhtmlcontent197.aspx shows how to style the gridview with CSS.

You can replace the entire way the grid renders with the CSS Control Adapters, which should help reduce the markup size further.

Answer 11

As pagination is not allowed, I definitely explore to reduce total payload of this grid:

1. Using repeater control and build native TABLE to render this grid instead of datagrid control - this way I will have complete control over payload. Something like:
2. Using 100% CSS style instead of controls attributes.
3. Disabling the viewstate (?)

Note that performance issue is less relating to asp.net here and more to the amount of data transfer from server to client machine.

Answer 12

• Disable viewstate if it is possible.
• Use Repeater instead of grid and use your own html, that would decrease the rendered mark up
• Try to use stored procedure
• If you have any methods which getting some data from other tables in your db. Try to use view

Answer 13

Don't use the GridView. If you want control, use the Repeater.