SPGridView and Pagination

In this article we can explore how to enable Pagination in SPGridView.

What is SPGridView?

Represents a grid view that looks and behaves like a SharePoint Foundation list view.

Step 1 Create SharePoint Project

Create a new empty SharePoint project.

image

Choose farm solution & click Ok.

image

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.

image

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 & 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. Create a SPGridView control & add to the Controls list of web part

2. Creates a demo DatTable of 100 items with Id, Name as properties

3. Assigns the table to grid as data source

4. Pagination is enabled for the grid view

Step 5: Insert Web Part

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

image

Save changes after insertion.

Step 6: Test the Web Part

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

image

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

image

This concludes the code of Paginated Grid View.

Note

Some points worth noting are:

1. We are using SharePoint Grid View control

2. We are using SharePoint Built-in Pagination

3. The whole data is loaded in server side

4. On page link click, a post back happens

5. Pagination event sets the page index & control is updated

Summary

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

Leave a Reply

Your email address will not be published. Required fields are marked *