Inline editing for SharePoint 2007

25.05.2012 v2.7: Added support for frozen list view header in Chrome and Firefox in addition to the existing IE support.

---

17.05.2012 v2.6.3: Fixing positioning error in IE when scrolling and added a method of clearing a datepicker value by hitting the Delete key when the datepicker is active.

---

19.02.2012 v2.6 fixed a bug when trying to save “<”, “>” or “&” in a text field. Changed the script to use spjs-utility.js. Note that this version requires jQuery v1.6.4 or newer.

---

19.02.2012 v2.5 fixes bugs with “pinTableHeader” and grouped views.

---

28.09.2011 v2.4 fixes a bug preventing this to work with folders.

---

11.08.2011 v2.3 fixed a bug (from v2.2) that made it impossible to use the solution in document libraries. I have also changed the variables passed to the function “initCustomEditFunction” to an object literal. See updated CEWP below.

---

08.05.2011 v2.2 makes it possible to use this solution in a web part page alongside other list view web parts.

NOTE:
You can have only one list view web part with this feature activated in one web part page.

Both the CEWP code and the file “inlineEditingForSP2007.js” has changed.

---

09.02.2011 v2.1 released with this modifications:
Modified the “hover” CSS to highlight the editable TD’s only, and to show a small downarrow in the bottom right corner of the TD.

---

I have previously created a solution for editing items inline in a list view. You find it here This solution did not support choice fields or multi line text fields.

I stated a long time ago that i would update the solution to support choice fields, but never had the time to implement it. This added feature was requested a few weeks ago, and i had to deliver…

I will put this in a new post as it is completely rewritten.

---

This solution features inline editing of the following field types in plain list views and in grouped views:

• Date and Time
• Single line of text
• Number
• Currency
• Yes/No
• Person or Group (Single choice)
• Dropdown choice
• Radio buttons
• Checkboxes
• Multiple lines of text (Plain text)

Hover:

Edit:

In Internet Explorer the list view heading row will scroll with the page. This feature is supported in IE only as you cannot have a <tr> with css position:relative in any other browser, and i haven’t had the time to find a workaround.

The code is tested in IE8, Firefox 3.6.13, Chrome 9.0.597.84 and in Safari 5.0.2

It runs much faster than the previous solution – even in large list views. This is due to the method it is created – addressing the <tr> and not each <td> in the first pass. The <td>’s are processed on hover over the <tr>.

You must have the ID column in the view for this solution to work. If you use the option to hide the ID column, it has to be positioned to the far right in th view.

The fields are edited “one at the time” and you must save changes for each individual field.

This solution relies upon “Google Libraries API” to host the jQuery and the jQueryUI. If you prefer local copies, edit the script src in the CEWP code.

Download the code

Get the latest version of the file “InlineEditingForSP2007.js” from here

Put this in a document library or a folder made in SharePoint Designer. Make sure all users have read access to the location. When inserting the CEWP code below, make sure to update the src to reflect your locale copy of the file “InlineEditingForSP2007.js”.

Add this code to a CEWP below the list view

For v2.0-2.2

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/EditInListView/inlineEditingForSP2007.js"></script>
<script type="text/javascript">
// Set variables
	var dateFormat = 'm/d/yy';
	var boolYesNoText = 'Yes|No';
	var arrToEdit = [];

// If there are only one list view web part in the page, we can rely upon SharePoint to provide the list GUID:
	myListGuid = ctx.listName;

// To use the solution in a web part page with more than one list view web part you must provide the list GUID manually:
	//var myListGuid = "{B9F1D8CF-83DB-4E1A-BF61-752BCB40B2CF}"; // Change this GUID to match your's

// This parameter specifies whether to pin the table header to the top of the screen when scrolling (IE only)
	var pinTableHeader = true;

// The symbol used to mark the boundary between the integral and the fractional parts of a decimal number
	var decimalSeparator = '.'; 

// Hide the ID column
	var hideIdColumn = true;	
// Call function
	initCustomEditFunction(hideIdColumn);
</script>

For v2.3+

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/EditInListView/inlineEditingForSP2007.js"></script>
<script type="text/javascript" src="/test/English/Javascript/spjs-utility.js"></script>
<script type="text/javascript">

var argObj = {dateFormat:'m/d/yy',
			  decimalSeparator:'.',
			  boolYesNoText:'Yes|No',
			  labelArr:['Save','Cancel','Clear'],
			  arrToEdit:[],
			  myListGuid:'B9F1D8CF-83DB-4E1A-BF61-752BCB40B2CF',
			  pinTableHeader:true,
			  hideIdColumn:true};
	initCustomEditFunction(argObj);	
</script>

New in v2.6
I have removed some functions from the file “inlineEditingForSP2007.js” and you must refer spjs-utility.js in the CEWP

Parameters explained:

• dateFormat: This must reflect the current regional settings for the picker to “pick up” the date in the field and display it correctly in the datepicker.
• boolYesNoText: Used to display Yes or No in the field when it is changed. Only cosmetics as the “real” value is 0 or 1.
• labelArr: The text on the links when in edit mode on a field. New in v2.3
• arrToEdit: Optional. To restrict edit to a selection of fields, enter them here by FieldInternalName in an array format. Defaults to All editable fields in the current view.
• myListGuid: If there are only one list view web part in the page, we can rely upon SharePoint to provide the list GUID using
  myListGuid = ctx.listName
• myListGuid: To use the solution in a web part page with more than one list view web part you must provide the list GUID manually
  myListGuid = PutTheListGuidHere
• pinTableHeader: This parameter specifies whether to pin the table header to the top of the screen when scrolling (IE only)
• decimalSeparator: The symbol used to mark the boundary between the integral and the fractional parts of a decimal number
• hideIdColumn: The argument passed in the function call – true to hide the ID column, false to keep it visible.

Read here how to find the list GUID

Please ask if anything is unclear.

Alexander