25.08.2012 v3.0 Fixed a bug where you could not have multiple views of the same list in a page. This update lets you have multiple lists / views of the same list in a page, and have the inline editing feature activated on all of them. The argObj property “myListGuid” is now obsolete. You must use jQuery v1.6 or above. Please note that there are an issue with the frozen header in IE when using jQuery 1.8.
31.05.2012 v2.8 BETA: Added support for single and multi lookup columns.
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>
For v3.0+
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/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:[],
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
New in v3.0
The argObj property “myListGuid” is now obsolete.
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 Obsolete in v3.0: 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 Obsolete in v3.0: 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
