26 Sep

How to Display SharePoint List Data in a GridView

The most basic task for a visual web part is to display data from a SharePoint list. For this example, I’m going to use the standard ASP.NET GridView control, but don’t forget that SPGridView inherits from the GridView class so you can reuse this code for an SPGridView as well.


Sample Data

I created a blank site called “Sample Site” and a Custom List called “Sample List”, with the default Title column and a Yes/No column called “Filter” that defaults to Yes. I then added some rows using the default List view.

 
Sample List with four items 

We will see from the following steps how to programmatically display the ID Number and Title from all the rows from “Sample List” that have a Filter set to Yes.
 

Filtered GridView


Preliminary Steps

1. Create a new SharePoint 2010 Project (Visual C#) in Visual Studio 2010. If these templates aren’t available to you or you get an error when you try, make sure that you’re creating the project on a server with SharePoint Foundation 2010 installed, and that you have Microsoft SharePoint Developer Tools installed in Visual Studio.
 

Create an Empty SharePoint Project in Visual Studio 

Next, In the pop-up window, make sure you select the “Deploy as a farm solution” option. SharePoint does not allow you to create visual web parts for a sandbox solution.
 

Deploy as a farm solution option 

2. Add a Visual Web Part to the solution. You can right-click on the project name in the Solution Explorer, select Add, and then New Item.

Then select Visual Web Part and give it a name with alphanumerics and no spaces.

3. Open up the UserControl (the .ascx file) and drop in an asp:GridView control. (It’s in the Toolbox under the Data section.) You could also drop in an asp:Label control to display error messages, etc.

 
Drag a GridView from the Toolbox 

4. Open the .ascx.cs file (F7).


Get Data from Sample List

1. Define the scope. You can use SPContext.Current.Web to select the current site as long as the list exists in the same site as the page where you will be using the web part. Otherwise, specify the site collection and site where the list resides.

2. Write the query. You are probably familiar with using SQL to select rows from a table in a SQL database. SharePoint uses CAML (Collaborative Application Markup Language) which looks a lot like XML. In the future it may be more beneficial to set up LINQ, but for this example we will use CAML.
To do that you create an SPQuery object and assign to it the CAML query as a string. You can also indicate which columns to fetch with the ViewFields property.

3. Query the SPList and store results in an SPListItemCollection. Use the SPList.GetItems(SPQuery) method to retrieve the rows that match your query and store it in an SPListItemCollection object.

4. Create the Data Table. Use a DataTable object and define the columns and data types.

5. Iterate through SPListItemCollection and store data from each SPListItem in DataTable. Here is where you can do whatever formatting or calculations you need to do with the data. Note: You may also want to display a message if the query returned no results.

6. Format the GridView Columns. Apply formatting such as alignment, width, and CSS classes to the GridView before binding. BoundField.DataField corresponds to the Data Table Column name.

6. Bind table to GridView. Be sure to set GridView.AutoGenerateColumns to false, so that your formatted columns will be the only ones that show up.


Final Steps

  1. Package and deploy the project.
  2. Navigate to the site collection in SharePoint, and activate the feature with the visual web part.
  3. Create a new web part page or edit an existing one. When you click insert a web part, the visual web part is under the Custom category.
  4. Add the visual web part to the page and save.

 

Copyright © 2014 Keren Apura; Fruitful theme by fruitfulcode