AzamSharp

Client Side GridView Paging and Soting Using SqlDataSource Control
published on 8/17/2008 2:29:33 PM

ASP.NET includes a built in Ajax framework named "Client Callbacks" which is used to perform Ajax requests. The GridView control uses this feature with the data source controls to perform client side sorting and paging.

To enable client side paging and sorting you just need to set the EnableSortingAndPagingCallbacks to true. Also, you need to make sure that the DataSourceID is set to a valid data source control like SqlDataSource, ObjectDataSource or AccessDataSource. The SqlDataSource is the easiest control to setup and requires no coding at all.

Here is the code for GridView and SqlDataSource control.

 <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
            SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Alphabetical list of products]">
        </asp:SqlDataSource>
        <asp:GridView ID="GridView1" EnableSortingAndPagingCallbacks="true" runat="server" AllowSorting="True" 
            AutoGenerateColumns="False" DataKeyNames="ProductID" 
            DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="ProductID" HeaderText="ProductID" 
                    InsertVisible="False" ReadOnly="True" SortExpression="ProductID" />
                <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
                    SortExpression="ProductName" />
                <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 
                    SortExpression="UnitPrice" />
            </Columns>
        </asp:GridView>

Run the above code and you will see that you will be able to perform sorting and paging on client side.

As you can see in the image above each time you click the GridView header to sort the size of the response is increasing. Fiddler shows that some encrypted data is sent back to the client as a response. That encrypted data is the __EVENTVALIDATION hidden field. Event Validation is a new feature in ASP.NET 2.0 which makes sure that the events are generated by only the controls which are registered to fire events.

The only solution to this size problem I have found is to disable the event validation of the page. Please note this is a security hole so please make this decision wisely.

<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoScreenScrape.WebForm1" %>

Now, if you make sorting/paging requests you will note that the size of the response is not increased.

Did you like this article?

Submit

Name:
Name:
Email:
Comment/Feedback:
2+2=