Adding GridView to Sharepoint 2010 List Forms

Quite a while ago, I got a piece of very interesting work which requires me to create user-friendly list forms for adding and editing coded class timetable data on Sharepoint 2010.

The timetable data of a class is coded (including the day, time, and room info.) and stored in a field of a Sharepoint list.

clip_image001

It is obviously that the default Sharepoint list forms are not user-friendly at all for end users, such as teachers or courses administrators, to input and edit the class timetables.

clip_image002

To provide end-users an easy way to manage the class timetables, I created custom Sharepoint list forms (New/Edit Forms) with GridView control integrated.

clip_image004

The blog post goes through the main steps for adding GridView control to Sharepoint 2010 list forms.

1. In your Sharepoint project in Visual Studio 2010, add a “List Definition” and name it as “Classes”, and create a list instance namely ‘Classes_Temp’.

clip_image005

2. Add two Application Pages, “CustomNewForm.aspx” and “CustomEditForm.aspx”, to your project (these two files are initially placed in the Layout folder. You need them into the “Classes” list definition.

clip_image006

3. Deploy the list definition on the target Sharepoint site. Open SPD and navigate to the deployed “Classes_Temp” list instance. Create custom New/Edit list forms and copy the source code to the corresponding “CustomNewForm.aspx” and “CustomEditForm.aspx” files created in Visual Studio.

4. Create a user control which wraps a GridView control. The purpose to create this user control is to encapsulate all business logics and data access modules into a single user control which can be reused in anywhere.

clip_image007

clip_image008

5. Create the business objects and utility classes (e.g. timetable parser and ULS Logging) .

clip_image009

6. Insert the created GridView user control into the “CustomNewForm.aspx” and “CustomEditForm.aspx” (at the place where you want to show the Gridview).

clip_image010

7. Now, the “CustomNewForm.aspx” and “CustomEditForm.aspx” application pages are created. We need set them as the default list forms . To do that, we open the “schema.xml” file of the “Classes” list definition, and point the “SetupPath” of the list forms to these two application pages :

clip_image012

After we deploy the list definition, we can see the GridView control appears on both New form and Edit form.

clip_image004[1]

About these ads

2 Responses to Adding GridView to Sharepoint 2010 List Forms

  1. Anonymous says:

    Can you post the entire src project..?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: