14 Oct

Update SharePoint List Data in a GridView (Part 1)

As a continuation from how to display SharePoint list data in a GridView, now we will explore how to update the data. We will start with the basics in Part 1, and gradually make the examples more complex in Part 2 and Part 3.

Sample Data

I will revisit the sample list I created for adding items to lists for this example. Here is what the list looks like when displayed in a GridView. Notice the addition of the “Edit” column on the far left.

Edit GridView Part 1 01 

Clicking “Edit” in a row will switch that row to Edit mode, where the values can be modified with text box controls.

Edit GridView P1 02 

Finally, clicking “Update” will save your changes.

Edit GridView P1 03 

(1) Format the GridView

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.

2. Open up the UserControl (the .ascx file) and drop in an asp:GridView control.

3. Allow the GridView to automatically generate the columns and edit button for now. We will go into customization in Part 2.

4. There are three GridViewRow events we are required to define with the Edit button: RowEditing, RowCancelingEdit, and RowUpdating. Add some named functions for these events.

5. Add styles and formatting to the GridView if you’d like, then switch to Code View (F7).

(2) Display Data on Page Load

1. Add these two namespace imports to the top.

2. Ensure the initial populating of the GridView with list data will only happen when the page is first loaded. Inside the Page_Load method, add a check for the PostBack event.

3. Populate the GridView with SharePoint list data. See How to Display SharePoint List Data in a GridView for the full code example and explanations.

3. Persist the DataTable in a Session object. The Session object holds the table data whenever you click “Edit” or “Update” and perform a postback.

4. Bind the data to the GridView control.

(3) Create a Bind function

Add this function inside the class, below Page_Load. This isn’t required but is good practice for DRY code.

(4) Define GridView Row Event Handlers

Now we write the code for each of the event handlers that we named back in (1). Of course GridViews have more kinds of events than these listed below, which you can expand this example for your needs (see this link for some more examples).

1. Use the RowEditing event to indicate which row should switch to Edit Mode. You do this by setting the EditIndex – the index of the row to be edited.

2. Use the RowCancelingEdit event to cancel and return to View mode. In Edit Mode, the “Edit” command becomes the “Update” and “Cancel” commands. When the user clicks “Cancel”, you have to set the EditIndex to a number less than 0.

3. Update the item with the RowUpdating event. When you write this event, you have to do two things: update the item in the SharePoint list, and update the item in the Session table.

*Please note that in order to keep this example simple, the above code doesn’t account for the situation where an ID doesn’t exist if the user chooses to modify it. See Part 2 for steps on how to customize the controls when switching to Edit mode, including disabling the ID field.

Final Steps

  1. Package and deploy the project.
  2. Navigate to the site collection or site in SharePoint, depending on the feature scope. 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.


More Information

Most of this code was gleaned & modified from Microsoft’s documentation on the GridView RowEditing event.
Also see their documentation on all GridView events.
And finally, see their documentation on the page life cycle and Data Binding events.


Copyright © 2014 Keren Apura; Fruitful theme by fruitfulcode