Click here to Skip to main content
15,867,141 members
Articles / Programming Languages / C#
Article

Creation of a SPGridview Webpart having Pagination, Sorting, Filtering Functionalities in Sharepoint Site in Step by Step Manner

Rate me:
Please Sign up or sign in to vote.
4.53/5 (11 votes)
16 Apr 2009CPOL4 min read 170.5K   8.3K   24   18
Creation of a SPGridview Webpart having pagination, sorting, filtering functionalities in Sharepoint aite in step by step manner

Introduction

Sharepoint has a built-in gridview control, i.e. SPGridView control. It has built-in support for sorting, filtering functionalities when used with an ObjectDataSource, and the look and feel is similar if SPGridView control is used. This is the major reason behind SPGridView usage over ASP.NET GridView control.

Below are the functionalities provided with this sample:

  • Creating SPGridview webpart
  • Different models of Pagination
  • Sorting
  • Filtering

This is what we are going to achieve at the end of this article:

Image 1

How to Use the Code

Unzip the provided sample code “SPGridViewWebpart”. The solution contains:

  1. SPGridViewWebpartClass.cs: The actual webpart that contains SPGridview with paging, sorting and filtering functionalities
  2. DataTableWrapper.cs: ObjectDataSource returns DataRow. To return a Datatable and for binding SPGridview with this datatable, this class acts as a wrapper.
  3. SmartPager.cs: A pagination model
  4. XofYPager.cs: A pagination model

Build the solution and deploy the DLL in GAC and add the webpart in Sharepoint site.

The steps involved are listed below.

A) Create Web Part

  1. Open Visual Studio IDE, Select File >> New>> Project, select “Visual C#” as language and under “Windows” select “Class Library” template. 
  2. Right click on References and select “Add References” option. 
  3. Select “Windows SharePoint Services” and “System.Web” from the .NET tab and click Ok. 
  4. Add all the class files i.e. SPGridViewWebpartClass.cs, DataTableWrapper.cs, DataTableWrapper.cs and XofYPager.cs files to the project.

B) Creating Datatable in Runtime

Create a Datatable with columns Title, Status, Description and populate the datatable with data. Here populate the datatable with some sample datatable like TitleA, StatusA, DescriptionA, etc.

C#
private DataRow CreateDataTable(string letter)
{
    DataRow dr;
    dr = sourceDataTable.NewRow();
    dr["Title"] = "Title" + letter;
    dr["Status"] = "Status" + letter;
    dr["Description"] = "Description" + letter;
    sourceDataTable.Rows.Add(dr);
    return dr;
}

C) Pagination

Enable the Pagination in gridview control. And define the page size as 5.

C#
oGrid.PageSize = 5;
oGrid.AllowPaging = true;

Different Types of Showing Pagination

Use any one of the pagination models given below and comment the other models' code.

Default Pagination

Let's consider that a total of 50 records are present. Then it displays pagination in this way: 1 2 3 4 5 6 7 8 9 10.

C#
oGrid.PageIndexChanging += new
                  GridViewPageEventHandler(oGrid_PageIndexChanging);
oGrid.PagerTemplate = null;

void oGrid_PageIndexChanging(object sender,GridViewPageEventArgs e)
{
    oGrid.PageIndex = e.NewPageIndex;
    oGrid.DataBind();
}
Image 2
First Model of Pagination

This displays pagination in this way. For the first page, it displays 1 of 10 and for the second page it displays 1 of 10 and so on.

C#
XofYPager xofy = new XofYPager("{0} of {1}", oGrid);
oGrid.PagerTemplate = xofy;
Image 3
Second Model of Pagination
C#
SmartPager smartpager = new SmartPager(1, oGrid);
oGrid.PagerTemplate = smartpager;
Image 4
Third Model of Pagination
C#
SPGridViewPager pager = new SPGridViewPager();
pager.ID = "mypager";
pager.GridViewId = "oGridId";
base.Controls.Add(pager);
Image 5

D) Sorting Code

Enable the sorting in gridview control. Sorting is enabled on all the columns of the DataTable i.e. Title, Status and Description.

C#
oGrid.AllowSorting = true;

BoundField colTitle = new BoundField();
colTitle.DataField = "Title";
colTitle.HeaderText = "Title";
colTitle.SortExpression = "Title";
this.oGrid.Columns.Add(colTitle);

BoundField colStatus = new BoundField();
colStatus.DataField = "Status";
colStatus.HeaderText = "Status";
colStatus.SortExpression = "Status";
this.oGrid.Columns.Add(colStatus);

BoundField colDescriptione = new BoundField();
colDescriptione.DataField = "Description";
colDescriptione.HeaderText = "Description";
colDescriptione.SortExpression = "Description";
this.oGrid.Columns.Add(colDescriptione);

E) Filtering Code

Filtering is enabled on all the columns of the DataTable i.e. Title, Status and Description.

C#
oGrid.AllowFiltering = true;

oGrid.FilterDataFields = "Title";
oGrid.FilteredDataSourcePropertyName = "FilterExpression";
oGrid.FilteredDataSourcePropertyFormat = "{1} like '{0}'";

oGrid.FilterDataFields = "Status";
oGrid.FilteredDataSourcePropertyName = "FilterExpression";
oGrid.FilteredDataSourcePropertyFormat = "{1} like '{0}'";

oGrid.FilterDataFields = "Description";
oGrid.FilteredDataSourcePropertyName = "FilterExpression";
oGrid.FilteredDataSourcePropertyFormat = "{1} like '{0}'";

F) Deploying the Web Part

  1. Create Strong name key.
    1. Right click on the web part project, go to “properties”
    2. Select “signing” tab from left side
    3. Check the “Sign the assembly” checkbox
    4. Select “New” from the below drop down.”Create Strong Name Key” Window opens.
    5. Uncheck the “Protect my Keyfile with a password”, enter name in the “Key File Name” textbox, then click “ok”.

      Check the below screen for reference:

      Image 6

  2. Build the solution. 
  3. Drag and drop the web part DLL in GAC (Type “assembly” in Start -> Run to open the Assembly folder directly). 
  4. Add Safe Control tag in the web.config file of this path- SharePoint Installation Drive\Inetpub\wwwroot\wss\VirtualDirectories\[Site Port No.]\web.config.
    XML
    <SafeControl Assembly="[Web part Assembly Name], Version=1.0.0.0, 
    	Culture=neutral, PublicKeyToken=[PublicKeyTokenValue]" 
    	Namespace="[Web Part Namespace Name]" TypeName="*" 
    	Safe="True" AllowRemoteDesigner="True"/>

    Note: Get the Public Key Token value in two ways:

    1. From the Assembly folder, right click on the DLL (or deployed assembly) and go to properties and copy the Public Key Token value. 
    2. Use Lutz Reflector. 
  5. Do iisreset.

G) Adding the Web Part in the Web Part Gallery

  1. Navigate to the site URL – http://[Site Port No.] 
  2. Go to Site Actions>> Site Settings>>Galleries>>Webparts>>Web Part Gallery 
  3. Click on “New” button of “Web parts Gallery” page. ”Web Part Gallery: New Web Parts” page gets opened, select the deployed web part from the list below and click on “Populate Gallery” button 
  4. If web part already exists, check the “Overwrite if file already exists” checkbox and click on “Populate Gallery” button

H) Using the Web Part in the Site Home Page

  1. Navigate to the Site Home Page 
  2. Go to Site Actions>>Edit Page 
  3. Click on “Add a Web Part” and the opened window contains the list of all web parts
  4. Under Miscellaneous section, select the previously deployed web part and then click on “Add” button. 
  5. Click Exit Edit mode

Now the SPGridView web part is displayed with paging, sorting and filtering functionalities. It has the same look and feel of a Sharepoint site. That is the advantage of using SPGridView control instead of ASP.NET GridView control.

I) Debugging the Web Part

Refer to my article:

History

  • 13th April, 2009: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
India India
I am Sreedhar Ambati working as a developer. I am having 6+ yrs of experience in Microsoft technologies like ASP,VB,ASP.Net, Vb.Net, C#.Net, Microsoft Dynamics CRM and Sharepoint Server 2007.
I used to blog at: http://ambatisreedharworks.wordpress.com and http://ambatisreedhar.spaces.live.com

Comments and Discussions

 
QuestionGreat ! Now, how to put a Add New with that green cross below the grid ??? Pin
MarcorMsn17-Nov-10 10:39
MarcorMsn17-Nov-10 10:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.