SPGridView and Pagination in SharePoint

What a SPGridView is

A SPGridView represents a grid view that looks and behaves like a SharePoint Foundation list view.

Step1: Create SharePoint Project

Create a new empty SharePoint project.



Choose "Farm solution" and click "Ok".



Step 2: Add Visual Web Part

Add a Visual web part to the solution.  We are planning to keep the grid control in this web part.



Step 3: Add Grid View

In the web part code file, add the following namespaces:

using System.Web.UI.WebControls;

using Microsoft.SharePoint;
 
Now declare the following private variables:

private Microsoft.SharePoint.WebControls.SPGridView _grid;
 
Add the following CreateChildControls() method:
 

protected override void CreateChildControls()

{

    DataTable table = GetDataTable();

    _grid = new Microsoft.SharePoint.WebControls.SPGridView();

    _grid.AutoGenerateColumns = false;

    _grid.AllowPaging = true;

    _grid.PageSize = 10;

    _grid.PageIndexChanging += _grid_PageIndexChanging;

    foreach (DataColumn column in table.Columns)

        _grid.Columns.Add(new BoundField() { DataField = column.ColumnName, HeaderText = column.ColumnName });

    _grid.DataSource = table; 

    this.Controls.Add(_grid);

    _grid.PagerTemplate = null;

    _grid.DataBind();

}

  
Additionally, add the following 2 methods to tie up the events and table retrieval.
 

void _grid_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

    _grid.PageIndex = e.NewPageIndex;

    _grid.DataBind();

}

 

private DataTable GetDataTable()

{

    DataTable result = new DataTable();

    result.Columns.Add("Id", typeof(int));

    result.Columns.Add("Name", typeof(string));

    for (int i = 1; i <= 100; i++)

        result.Rows.Add(new object[] { i, "Name " + i.ToString() }); 

    return result;

}

Please note that the code performs the following:

1. Creates a SPGridView control and adds it to the Controls list of the web part
2. Creates a demo DatTable of 100 items with Id and Name as properties
3. Assigns the table to the grid as a data source
4. Pagination is enabled for the grid view

Step 4: Insert Web Part

Execute the solution, edit your SharePoint page and insert the web part.



Save the changes after insertion.

Step 5: Test the Web Part

You can see the web part with pagination enabled, as shown below.



Click on another page link and you can see the rows are reflecting the page change.



This concludes the code the of Paginated Grid View.

Note

Some points worth noting are:

1. We are using the SharePoint Grid View control
2. We are using SharePoint Built-in Pagination
3. The entire data is loaded server-side
4. On page link click, a post-back happens
5. The Pagination event sets the page index and the control is updated

Summary

In this article we have explored how to enable Pagination in SPGridView.