Paging with the ASP.NET DataGrid using J#

• Download demo project - 10.8 Kb

Introduction

This article will show you how to implement paging with the ASP.NET DataGrid control using J#.NET. If we have a huge list of items in a table and for some reason we can not show all information on the screen, we can make use of multiple pages. Just like a phone book, all entries can not be listed on the same page. We can do exactly the same with a huge list of items in a Grid control in ASP.NET. Add multiple pages.

Get started!

Open Visual Studio and open a new J# ASP.NET Web Application. Add a DataGrid WebForms control to the web page in design mode. Right click the control and choose “Properties”. Enable paging by choosing “True” on the property “AllowPaging”. You can also set the page size on the “PageSize” property.

Limitations

Important: You can only use paging for a data source that implements the ICollection interface. We will be using a System.Data.DataTable in this example because it implements this interface. A DataReader does not implement the ICollection interface.

The data source

In this example, we will show data from a MS SQL database. If the page request is not a postback, do a database lookup.

private void Page_Load(Object sender, System.EventArgs e)
{
    if ( !this.get_IsPostBack() )
    {
        // Initialize the DataGrid
        this.InitializeDataGrid();
    }
}
private void InitializeDataGrid( )
{
    try
    {
        // DB connection string
        String _connectionString =
           "Data Source=localhost\\MinDB;Initial " +
           "Catalog=BMWCCN;User Id=aspnet;Password=aspnet";
        // Open a connection to the database using SQL login
        System.Data.SqlClient.SqlConnection _connection =
          new System.Data.SqlClient.SqlConnection( _connectionString );

        // The sql statement
        String _sql = "SELECT * FROM Forum ORDER BY MeldingsId";

        // Creates a DataTable for the sql result.
        System.Data.DataTable _dataTable = new System.Data.DataTable( );

        // Uses a DataAdapter to get the data from the database.
        System.Data.SqlClient.SqlDataAdapter _adapter =
          new System.Data.SqlClient.SqlDataAdapter( _sql, _connection );
        _adapter.Fill( _dataTable );

        // Sets the datasource and binds it to the DataGrid.
        this.DataGrid1.set_DataSource( _dataTable );
        this.DataGrid1.DataBind();

    }
    catch ( Exception ex )
    {
        this.get_Trace().Warn( ex.getMessage() );
    }
}

The PageIndexHander

Add a “Page index changed” event handler to the control. Open the design view. Right click it and choose “Properties”. Click on the lightning icon in the Properties window to show all event handlers. Double click the “PageIndexChanged” text. Visual Studio will add a handler to your code. In the index page handler, you will tell the control what data your control should show.

private void DataGrid1_PageIndexChanged (Object source,
           System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
    this.DataGrid1.set_CurrentPageIndex( e.get_NewPageIndex() );
    this.InitializeDataGrid( );
}

This should all there is to be there for simple paging. You can go forward or backwards with the “<” and the “>”. If you want numbers instead of the “<” and the “>” to navigate in the pages, please do: switch to design mode in Visual Studio, right click the control and choose “Properties”, under “Styles” locate the “PageStyle”, expand it and find the “Mode” and switch from "NextPrev” to “NumericPages”.

Conclusion

We have seen in this short article how we can easily make paging support for our DataGrid ASP.NET control. The most important thing to remember is that the data source must implement the ICollection interface, and do remember to add a page index handler.