How to: Displaying Data by Using the SPGridView Control in SharePoint 2007

Hi all,

SharePoint 2007 provides an exciting web control named as SPGridView. This control provides lot of functionalities:

• Paging 
• Sorting 
• Grouping
• Filtering 
• Resizing columns 
• Bind the SharePoint list or custom data to the SPGridView etc.

Please refer to Ted Pattison's video on the SPGridView. I will extend the same code where I have created an application page and build the SPGridView on top of it.

Step1: The ASPX Page 

Open the AppPage.apsx page and add two additional lines so that we can use SPGridView

<%@ Page Language="C#" MasterPageFile="~/_layouts/application.master" AutoEventWireup="true" Inherits="CustomAppPage.AppPage, CustomAppPage,  Version=1.0.0.0, Culture=neutral, PublicKeyToken=fe057018f74cd3a4" %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 

<%@ Import Namespace="Microsoft.SharePoint" %>

Step2: On the content placeholder "PlaceHolderMain", we create a SPGridView control as follows:

<asp:Content ID="Main" runat="server" ContentPlaceHolderID="PlaceHolderMain">
        Custom SPGridView
   <SharePoint:SPGridView
   runat="server"
   ID="grdPropertyValues"
   AutoGenerateColumns="false"
   RowStyle-BackColor="#DDDDDD"
   AlternatingRowStyle-BackColor="#EEEEEE"   />
  
</asp:Content>

Step3: The Code File

Open the AppPage.aspx.cs page and create an OnLoad function. We are program against the object model.

-----------------------------------------------------------

  public partial class AppPage : LayoutsPageBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected override void OnLoad(EventArgs e)
        {
            SPSite siteCollection = this.Site;
            SPWeb site = this.Web;

            

            // SOME PROCESSING HERE!

        }
    }

-----------------------------------------------------------

Step4:  The Helper object

We will create a custom class which will eventually used by AppPage.aspx.cs file. 

We create a new folder called "Utility" and cretae a C# file named "SPGridViewHelper.cs".

 The helper class is to simply create an instance of name-value pairs. Firstly, it will instantiate "DataTable" object whch has two columns: 

i) PropertyName (string)

ii) PropertyValue (string)

The when somebody uses function "AddProperty",  this utility method simply add new row in the data table as name-value pair. 

The function BindGrid adds two SPBoundField named fldPropertyName and fldPropertyValue, attach the data source and binds to the grid. 

Step5: The complete code

protected override void OnLoad(EventArgs e)
        {
            SPSite siteCollection = this.Site;
            SPWeb site = this.Web;

            

            // SOME PROCESSING HERE!

           PropertyCollectionBinder pcb = new PropertyCollectionBinder();

            pcb.AddProperty("Site Title", site.Title);
            pcb.AddProperty("Site ID", site.ID.ToString().ToUpper());
            pcb.AddProperty("Current User Name", site.CurrentUser.Name);
            pcb.AddProperty("Current User Name", site.CurrentUser.Name);
            pcb.AddProperty("Current User Name", site.CurrentUser.Name);
            pcb.AddProperty("Current User Name", site.CurrentUser.Name);
            pcb.AddProperty("Current User Name", site.CurrentUser.Name);

            pcb.BindGrid(grdPropertyValues);

        }

Step6: The Output

Deploy the solution and test it. You will receive this kind of screen: 

Cheers, 

--aaroh 

Download the source here.