Paging the DataGrid

The DataGrid control provides for automatic as well as custom pagination of contents, which gives users many options for viewing data. Users commonly want to page through smaller pieces of a larger data set. Sometimes the desired piece of information is only a subset of the total data, or maybe the data must be viewed with a collection to allow for comparison with the neighboring data.

Automatic pagination is simple. You set the AllowPaging property to true and provide a PageIndexChanged EventHandler that sets the CurrentPageIndex to the NewPageIndex and calls DataBind on the DataGrid.

Custom pagination requires that both the AllowPaging property and the AllowCustomPaging property be set to true. The PageIndexChanged EventHandler can then bind the control to a subset of the total data the user is perusing. The code must then set the VirtualItemCount property of the DataGrid to indicate what the total count is. When allowing custom pagination, the DataGrid can no longer derive the total item count from the bound items, so you must explicitly provide this information.

Code Listing 3-11 demonstrates both automatic and custom paging of the DataGrid. The calls to the GetData method for the automatically paginated control always calculate the full set of squares, although only 10 of them are being displayed at once, whereas the custom-paginated DataGrid requires that only 10 samples be calculated for any given page view.

Code Listing 3-11: DataGridPaging.aspx

 <%@Import namespace="System.Data" %>
<script language="C#" runat="server">
protected void Page_Load(object o, EventArgs e) {
    if(!IsPostBack) {
        datagrid.DataSource = GetData(0, 100);
        datagrid2.DataSource = GetData(0, 10);
        datagrid2.VirtualItemCount = 100;
        DataBind();
    }
}
 
DataTable GetData(int startIndex, int count) {
    DataTable data = new DataTable();
    data.Columns.Add(new DataColumn("TheNumber", typeof(Int32)));
    data.Columns.Add(new DataColumn("Squared", typeof(Int32)));
 
    DataRow dr;
    for(int i = 0; i < count;i++) {
        dr = data.NewRow();
        int theNumber = i+startIndex;
        dr[0] = theNumber;
        dr[1] = theNumber * theNumber;  
        data.Rows.Add(dr);      
    }
    return data;
}
 
void ChangePage(object o, DataGridPageChangedEventArgs e) {
    datagrid.CurrentPageIndex = e.NewPageIndex;
    datagrid.DataSource = GetData(0, 100);
    datagrid.DataBind();
}
 
void CustomChangePage(object o, DataGridPageChangedEventArgs e) {
    datagrid2.CurrentPageIndex = e.NewPageIndex;
    datagrid2.DataSource = GetData(e.NewPageIndex*10, 10);
    datagrid2.DataBind();
    datagrid2.VirtualItemCount = 100;
}
 
</script>
<form runat="server">
    <asp:DataGrid runat="server"  
        AllowPaging="true" OnPageIndexChanged="ChangePage"/>
    <asp:DataGrid runat="server"  
        AllowPaging="true" AllowCustomPaging="true"
        OnPageIndexChanged="CustomChangePage"/>
</form> 

Note

Custom paging of the DataGrid can be particularly beneficial when the entire set of data being used is quite large or when retrieving it is expensive. Custom paging can also be used when the data source is a DataReader but you still require paging support on the DataGrid. In this scenario, you are responsible for managing the paging in the code, but you might achieve a better result with custom controls than you would by using a DataSet with automatic paging.

Now that you can bind data and understand how to page and sort data in the DataGrid, let’s look at how to enable the user to select individual items from within the DataGrid.

The DataGrid automatically recognizes when the user clicks an item by using a command name that is part of a known set. When the Select command is invoked, the DataGrid automatically updates the appearance of the individual item by using SelectedItemStyle. In Code Listing 3-12, SelectedItemStyle uses several of the styles available. The full set of available styles belongs to the TableItemStyle class and includes BackColor, ForeColor, BorderColor, and CssClass.

When the selected index is changed, not only does the appearance of the selected item within the DataGrid changed automatically, but an event is also fired. This allows a developer to provide an appropriate event handler that can be used to update a separate user interface element on the page based on the item selected in the DataGrid.

Code Listing 3-12: DataGridSelect.aspx

 <%@Import namespace="System.Data" %>
<script language="C#" runat="server">
DataTable data;
protected void Page_Load(object o, EventArgs e) {
    GetData();
    datagrid1.DataSource = data;
    if(!IsPostBack) {
        datagrid1.DataBind();
    }
}
 
DataTable GetData() { 
    data = Session["data"] as DataTable;
    if(data != null) {
        return data;
    }
    data = new DataTable();
    DataColumn primaryColumn 
        = new DataColumn("carid", typeof(Int32));
    data.Columns.Add(primaryColumn);
    data.Columns.Add(new DataColumn("year", typeof(Int32)));
    data.Columns.Add(new DataColumn("make", typeof(string)));
    data.Columns.Add(new DataColumn("model", typeof(string)));
    DataRow dr;
    dr = data.NewRow();
    dr[0] = 1; dr[1] = 1998; dr[2] = "Isuzu"; dr[3] = "Trooper";
    data.Rows.Add(dr);
    dr = data.NewRow();
    dr[0] = 2; dr[1] = 2000; dr[2] = "Honda"; dr[3] = "Civic";
    data.Rows.Add(dr);
    DataColumn[] primaryColumns = new DataColumn[1];
    primaryColumns[0] = primaryColumn;
    data.PrimaryKey = primaryColumns;
    Session["data"] = data;
    return data;
}
 
</script>
 
<form runat="server">
    <asp:DataGrid runat="server" DataKeyField="carid" 
        AutoGenerateColumns="false">
        <selectedItemStyle BackColor="tan" Font-Bold="true" />
        <Columns>
            <asp:ButtonColumn CommandName="Select" Text="Select" />
            <asp:BoundColumn DataField="carid" ReadOnly="true" 
                HeaderText="id" />
            <asp:BoundColumn DataField="year" HeaderText="year" />
            <asp:BoundColumn DataField="make" HeaderText="make" />
            <asp:BoundColumn DataField="model" HeaderText="model" />
        </Columns>
    </asp:DataGrid><br/>
</form> 

Tip

Use two DataGrid controls on a page to allow for a master view and a details view. Synchronize the SelectedItemIndexChanged event in the master DataGrid to update the contents of the details view DataGrid.