How to: Link a SharePoint List to the JS Grid Control

Applies to: SharePoint Foundation 2010

This how-to demonstrates linking a JS Grid control to a SharePoint list. In this how-to, which is a follow up to How to: Create a Basic JS Grid Control, you create a SharePoint list and then modify the grid created in How to: Create a Basic JS Grid Control to read the data from that SharePoint list.

A SharePoint list consists of items or rows, and columns or fields that contain data. The SPList.Items property returns the collection of items in the list, and the SPList.Fields property returns the collection of fields in the list. To improve performance, you should use one of the GetItem* methods to return a filtered collection of items from the list.

For more information about SPList, see SPList.

Prerequisites

• Microsoft SharePoint Foundation 2010

• Microsoft Visual Studio 2010

• SharePoint development tools in Microsoft Visual Studio 2010

• Completion of How to: Create a Basic JS Grid Control

Note

Although you can complete this walkthrough without using Visual Studio, it is easier if you use both Visual Studio 2010 and the SharePoint development tools in Visual Studio 2010.

To populate the grid with data from a SharePoint list

1. In SharePoint Foundation 2010, create a SharePoint Tasks list, as follows:

   1. On the Site Actions menu, select More Options.

   2. Select Tasks in the list of types.

   3. Name the list TaskList.

   4. Add four or five records to the list.

2. In Visual Studio, open GridData.cs.

   GridData.cs contains definitions for several fields that are not in the TaskList list. Remove the following field definitions:

   • Department Manager

   • Department

   • Yearly Estimate

   • FY 2009 Estimate

   • FY 2010 Estimate

   • checkbox

   • Hyperlink

   The remaining list of columns appears as follows.

   //Columns which map to the TaskList list.
   data.Columns.Add(new DataColumn("Key", typeof(Guid)));
   data.Columns.Add(new DataColumn(GridSerializer.DefaultGridRowStyleIdColumnName, typeof(String)));
   data.Columns.Add(new DataColumn("HierarchyParentKey", typeof(Guid)));
   data.Columns.Add(new DataColumn("Title", typeof(string)));
   data.Columns.Add(new DataColumn("Start Date", typeof(DateTime)));
   data.Columns.Add(new DataColumn("Due Date", typeof(DateTime)));
   data.Columns.Add(new DataColumn("Complete Through", typeof(string)));
   

3. Replace the code that assigns values to the grid fields with the following.

   // Populate the grid with data from the list.
   // For the sake of simplicity, this sample requests all records from the task list.
   // In the real world, request only the data you really need.
   
   // Replace SPSite("https://server/site") with your server and site information.
   using (SPSite mySite = new SPSite("https://server/site"))
   {
       using (SPWeb myWeb = mySite.OpenWeb())
       {
   
           SPList taskList = myWeb.Lists["TaskList"];
           DataRow dr;
   
           foreach (SPListItem task in taskList.Items)
           { 
               dr = data.NewRow();
   
               dr["Key"] = task.UniqueId;
               dr["Title"] = task["Title"].ToString(); 
               dr["Start Date"] = task["Start Date"]; 
               dr["Due Date"] = task["Due Date"];
               dr["Complete Through"] = task["% Complete"]; 
   
               data.Rows.Add(dr);
           }
   
       }
   }
   

   Note

   Be sure to replace SPSite("https://server/site") with your server and site information.

4. In Visual Studio, press F5 to run the project.

   The data from the TaskList list should be visible in the Web Part.

See Also

Reference

SPList