Adding GridView to Sharepoint 2010 List Forms
April 29, 2012 2 Comments
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.
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.
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.
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’.
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.
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.
5. Create the business objects and utility classes (e.g. timetable parser and ULS Logging) .
6. Insert the created GridView user control into the “CustomNewForm.aspx” and “CustomEditForm.aspx” (at the place where you want to show the Gridview).
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 :
After we deploy the list definition, we can see the GridView control appears on both New form and Edit form.