Javascript, List view modification, SharePoint, Utilities

Inline editing for SharePoint 2007

174 Comments

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:
IMG
Edit:
IMG
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

&lt;link type=&quot;text/css&quot; href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/EditInListView/inlineEditingForSP2007.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// 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 = &quot;{B9F1D8CF-83DB-4E1A-BF61-752BCB40B2CF}&quot;; // 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);
&lt;/script&gt;

For v2.3+

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

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);	
&lt;/script&gt;

For v3.0+

&lt;link type=&quot;text/css&quot; href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/redmond/jquery-ui.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/EditInListView/inlineEditingForSP2007.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/spjs-utility.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

var argObj = {dateFormat:'m/d/yy',
			  decimalSeparator:'.',
			  boolYesNoText:'Yes|No',
			  labelArr:['Save','Cancel','Clear'],
			  arrToEdit:[],
			  pinTableHeader:true,
			  hideIdColumn:true};
	initCustomEditFunction(argObj);	
&lt;/script&gt;

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

174 thoughts on “Inline editing for SharePoint 2007”

  4. great job. Much easier to implement than the previous version. The only thing missing is what you had in the last version. The icon for fields that are or were set to editable. Still excellent work!

  5. This is neat! I have been looking for a way to create a filtered view and edit items in view. is there a way to add two buttons, one to click to make all editable fields visible so dont have to click each field, and a second button to save it all (for a 1 click save)? my list will never be more than 30 items. only 2 maybe 3 columns will be edited in the view. can it be done?

    1. Yes and no… It can be done, but I’m not sure I want to put in the extra time to implement it…

      If you have some special needs you can make this happen using SharePoint Designer.

      Alexander

    3. one more request, modification from my original. Is it easy to add an event that “Saves” on blur? My list has volunteersand the Sr watch has to assign preset time intervals to the volunteers. we could have up to 30 volunteers on a weekend. When I put this script on the view to assign times I thought it would be so much easier if one click set all my time interval fields to edit. then if the onblur saves the item it would simplify the process for the Sr watch. can you help with that? or provide guidence? thanks again

  6. Hi Alex,

    Great job! Just one thing I can’t seem to get the arrToEdit to work. I just want to be able to edit one value. But no matter what name I type in here causes the script to now work at all. I notice the ID column doesn’t hide as soon as I add a value to the array.

    Any tips?

  7. Pingback: Inline editing for SharePoint 2007 - JUAN PABLO PUSSACQ LABORDE

  8. I have a quick question about this. Yesterday this went in smoothly. Today I installed on another site and differnt view and I ran into a few bugs. It was a grouped view. the choice drop down field will only show save | cancel if the field has a value, and it doesnt show the choice field to change the value. I pulled the code off the page and used what you had straight from the instructions. Updated link to the inline source script. It looks like it works. the hover and click colors display, but I cann ot edit anything.

    On the view I create a new view, not grouoped. Fields:
    text
    multiple line
    people picker
    choice drop down
    date/Time
    date/Time
    ID

    The date fields seem to be working. the cal pops up and I’m able to make changes. Sometimes if the date field is to the far right of the view the cal popup displays off page and cant scroll to it without it fading away.

    People picker also seems to work. I have to choice dropdowns. the one that appears first appears to work. the functions and dropdown appear onclick, but the second choice dd only displays “save | cancel” no field.

    the multiline also does not return field.
    I am using IE 7 and no other scripts on the page.

    let me know if you have any questions

    1. Did some more testing, not really sure why I have failure in the one site. I did create a new list and retested with no issues. even with two dropdowns. I did figure out the multiple line field has to be plain text to be editable with this script. So I am guessing there is something wrong with my list. I will let you know if I figure it out.

  11. Pingback: Tweets that mention Inline editing for SharePoint 2007 « SharePoint JavaScripts -- Topsy.com

  13. Hi!
    Your script is wonderful and makes working with sharepoint smooth and easy.
    But sadly, I’ve met a bug. Sometimes, the pages with this script do not open, showing the following error: “Trying to use an SPWeb object that has been closed or disposed and is no longer valid.” It happens accidentally and I have no clue where to find a solution.
    Can you please suggest something? I’m using WSS 3, just in case.

    1. Hi,
      I do not think this error originates from “my” code. There are newer created or disposed any SPWeb object as this code is “client side” and uses the built in SharePoint webservices.

      Do you have any other custom code running that could cause this error? – server side code is not my “field” but i do think an error like this must originate in a server side code.

      Alexander

    2. Many thanks for the response! I’ve managed to localize the problem. This error always occurs when I try to move CEWP below the existing WP with data even when it’s blank and so the problem has nothing to do with your code.
      Actually, I’m rather newbie in Sharepoint and it seems odd to me when Sharepoint reacts like this on its own standard parts.
      Sorry for inconvenience.

  14. Hi Alexander,

    great script.

    is it possible to add an option for autosave?
    eg. on leaving the field automatically save the data when the data in the field has been changed?
    saves a lot of clicks when editing more than one field.

    grt Manfred

  16. Hi Alex:
    This is a tremendous script! I have a few questions.

    – Each “Save” will trigger a workflow, yes?
    – Is it possible to add new Append text to a versioned field?
    – Is it possible to place the down-arrow in the center of the cell, instead of the right?

    Thanks again-

    Charlie Epes
    Buffalo, NY

  17. Hi Alex,

    thanks for this great script! I found one minor glitch though, with IE7 setting the hideIdColumn to ‘true’ successfully hides the ID column header but not the ID’s for individual entries when the view is grouped. I think this is because if the way the page is rendered before it is displayed, correct?

    Chris

  18. The CEWP works great when added to a list, but when I add the CEWP below a web part of the same list I would like to edit (a web part page acting as a dashboard) the CEWP doesn’t work. The row is highlighted and the blue drop-down arrows appear, but nothing can be edited. Do you know how I can make this possible. Thanks for all your amazing work!!

  19. Hi
    Alexander Bautz,

    This works like a charm but for me I’m unable to get the single line of text column to work.

    Any reason for it not working?

    Thanks & Regards,
    Alekhya.

  20. This is a great script! I’ve been looking for a solution like this for a long time. I am not one to post comments, but you’ve made my life a hell of a lot easier because of this. Thanks!

    If I could make one request, it would be to support multiple choice person/group.

  21. Hi Alex!

    AMAZING WORK! I have implemented your solution to my test / development site and it works like a charm. Good job!!, I learn a lot form post like these.

    Keep posting great solutions like this.

    Regards
    Waqas Iftikhar
    (Student Developer)

    2. Hi Alex!

      I tried to implement the above solution on a document Library view “AllItems.aspx” page by adding a CEWP and following the exact same step, but the solution did not work.

      Any ideas or suggestions.

      Is there a way to implement this functionality in document libraries.

      I will keep researching this problem and try and find possible solutions

      Thanks
      Waqas Iftikhar
      Student Developer

  22. Hi Alex…excellent work!!

    I got a question, why I need to enable column ID in my view or else it will popup an error asking me to set hide ID to true?

    I don’t want to show ID column in my view, do I need to change somewhere else too???

    1. Hi,
      The ID column is used to identify the “item” and must be present in the view. You can however hide it in this script so that is is not displayed to the user.

      Alexander

    2. Hi Alex, I have a question…this is the situation ;

      I got about 15 column on my list, the 1st 5 column updated by admin, 2nd 5 column updated by client & the 3rd 5 column can be updated by both(admin+client).. How do I configure the inline update function by different user group?

      Is it possible to do this?

  23. Hi Alex!

    I tried to implement the above solution on a document Library view ‘AllItems.aspx’ page by adding a CEWP and following the exact same step, but the solution did not work.

    Any ideas or suggestions.

    Is there a way to implement this functionality in document libraries.

    I will keep researching this problem and try and find possible solutions

    Thanks
    Waqas Iftikhar

    4. Hi Alex,

      I do not get any error messages, as for the alerts they are loaded as I do get a message box with “Function” written on it, every time when the page loads.

      also for the Scripts I am using the “Google Libraries API” to host the jQuery and the jQueryUI, referencing the “InlineEditingForSP2007.js” placed in a SharePoint Designer Folder.

      Waqas

  24. Hi Alex,

    I am sure I am using the FieldInternalName for the “arrToEdit” and I used the method that you had described in your post.

    I sent you a screenshot of the library and the CEWP code that I am using.

    For some reason this code is not working on any of my document libraries.

    Waqas

    1. Hi,
      I can confirm that there is a bug in v2.2 when used in a document library. Please revert back to v2.1 until i come up with a fix.

      Alexander

  25. Hi Alex,

    Been using this solution a while now. But i have now tried to use it in a document library with folders. But it wont work on any documents within a folder. It highlights the fields and says “click to edit [column name]” but when i click it nothing happens.

    Anything i can do to get this to work?

  26. Pingback: Bookmarks for October 25th through November 2nd | Peng's Blog

  28. Hi Alex,

    I have set the javascript in the CEWP and I am not able to find the changes. Here, do i need to have date, bool field inorder to set this to work. I have all field as a single line txt in my list.

    Thanks
    Arockiaraj

  29. src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”>

    src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js”>

    src=”serverurl.”>

    var argObj = { dateFormat:’m/d/yy’,
    decimalSeparator:’.’,
    boolYesNoText:’Yes|No’,
    labelArr:[‘Save’,’Cancel’,’Clear’],
    arrToEdit:[],
    myListGuid:’B86BA39E-B0D3-4E5A-A16B-83027880CFB7′,
    pinTableHeader:true,
    hideIdColumn:true};
    initCustomEditFunction(argObj)

    I am left anything in the code
    Please let me know

    Thanks
    Raj

    1. Hi,
      If you have made the changes to the “argObj” as described in the “Parameters explained” section, you should be good to go.

      If you still do not get it right, send me some screenshots and I’ll see if i can spot the error.

      Alexander

  30. Would it be possible to refresh a calculated column after updating a value? Let me clarify: When I pick a value from a list, I have a few calculated columns that refer to that value that do not “recalculate”. Is that something you can consider for a future release?

    1. Hi,
      It’s not possible to reload only the calculated column (not without a lot of hassle that is), but by adding this line:

      location.href=location.href;

      after line 437, you should get a page refresh after each “save”.

      The reason for using this rather odd “command” and not using location.reload() has to do with SharePoint trying to repost changes made to the page if reloading using the latter .

      Alexander

  31. Hi, great solution! I have a couple questions:

    1. I can’t get the pinTableHeader to work. I’m using IE 8.0. Am I missing something obvious?
    2. Is it possible to make this work in a grouped view?

    Thanks!

  33. Hi Alexander,

    I still love this site after all this time. I’ve got this working very easily. There are two things though: 1. I can’t seem to force it to make sure required fields are filled in. 2. The date function seems to be broken for me.

    Thanks as always. This is such a huge resource for me.

    1. Hi,
      This solution will not ensure required fields are filled. In fact every field edited requires a separate postback (save) and I cannot implement this without putting in many hours of customization.

      What is it with the date field that does not work?

      Alexander

      1. Thanks. Basically if the field is set to be a date when I click it, it erases the field from view and no pop up comes up. The line turns red and the arrow at the bottom disappears. If I go back to it the previous entry remains. I’ve tried to leave the script as you wrote it and altered it (m/dd/yyyy) but it won’t work with a date field. Maybe I’m missing something?

        Thanks for your reply!

    3. Wow. That fixed it. It’s odd that it worked at all though. What I did was I had a local copy that was 1.3.2. When I made it 1.4.2 it worked!

  34. Wow. That fixed it. It’s odd that it worked at all though. What I did was I had a local copy that was 1.3.2. When I made it 1.4.2 it worked!

    Thanks – you are the master!

  35. Great script. I use it a lot. We have the following issues:

    1. When I type an “&” or an “<", the script will not save the row and a red background is produced.
    2. When I edit again and type the same text but leave out the special symbols, the save works, but the background still shows "red" when saving.

    Thanks

    2. Sorry, but I have pulled v2.5.1 as I see that I need to do some more to support newer versions of jQuery.

      If you want to fix this specific issue, change line 289 to this:

      content.push("<Field Name='"+fin+"'><![CDATA["+val+"]]></Field>");

      Alexander

    3. Hello Alexander, This works during the save operation. There is an issue displaying this. If you type in a field the following text:

      R&D

      Then after the save, it will show as

      R

      Then when you click to edit it again, it shows

      R&D

      So the data is there, it is just not getting displayed

      Oddly, if I just add one character more to the text, like a period or a space, it will show correctly.

      For example

      R&D.

      shows ok.

      Thanks again.
      Michel.

  36. With version 2.5, the pinTableHeader works now for us, but when there is a group by in the list, the script does not seem to work. I don’t get the blue backgrounds on mouse over.

    Thanks!

  37. We are using the inline editing v2.0-2.2 on a couple of our sites and it was working perfectly until today. No changes have been made, but only the highlight works and the editing feature doesn’t. Please advise if you have come across a similiar problem. Thanks

    1. Have you updated to a newer version of jQuery?

      If so, try out v2.6, but note that you must update the CEWP code.

      Alexander

    2. No we haven’t made any updates.

      As an aside I jut tried to run the newer version which didnt work. Here is the code:

      var argObj = {dateFormat:’m/d/yy’,

      decimalSeparator:’.’,

      boolYesNoText:’Yes|No’,

      labelArr:[‘Save’,’Cancel’,’Clear’],

      arrToEdit:[“Apply”],

      myListGuid:’1f87d67b-189f-402d-8685-cc878a3b6cf4′,
      pinTableHeader:true,

      hideIdColumn:true};

      initCustomEditFunction(argObj);

    5. I will try again. Below is my code and yes spjs-utility.js is included.

      //<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="http://ops/operationscontrol/infoctrl/melissa_tests/Shared%20Documents/InlineEditingForSP2007.js"></script>  
//<script type="text/javascript" src="http://ops/operationscontrol/infoctrl/melissa_tests/Shared%20Documents/spjs-utility.js"></script>  

//<script type="text/javascript">  

   

//var argObj = {dateFormat:'m/d/yy',  

//               decimalSeparator:'.',  

//               boolYesNoText:'Yes|No',  

//               labelArr:['Save','Cancel','Clear'],  

//               arrToEdit:['Apply'],  

//               myListGuid:'1f87d67b-189f-402d-8685-cc878a3b6cf4',  
//               pinTableHeader:true,  

               hideIdColumn:true};  

//     initCustomEditFunction(argObj);   

// </script>

    7. Hard to tall from the code you supplied – try pasting the code without commenting out every line. It looks like you are missing the “css file link” in the top by the way.

      Use “F12 > Console “in IE to look for error messages.

      Alexander

    8. I’m attaching the code again here. Everything looks correct to me, but unfortunately it still isn’t working.

      <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="http://office-na.ms.com/ops/operationscontrol/infoctrl/melissa_tests/Shared%20Documents/InlineEditingForSP2007.js"></script>  
<script type="text/javascript" src="http://office-na.ms.com/ops/operationscontrol/infoctrl/melissa_tests/Shared%20Documents/spjs-utility.js"></script>  
<script type="text/javascript">  

var argObj = {dateFormat:'m/d/yyyy',  
             decimalSeparator:'.',  
             boolYesNoText:'Yes|No',  
             labelArr:['Save','Cancel','Clear'],  
             arrToEdit:['Occurs'],  
             myListGuid:'1f87d67b-189f-402d-8685-cc878a3b6cf4',  
             pinTableHeader:true,  
             hideIdColumn:true};  
        initCustomEditFunction(argObj);   

</script>

    11. Hi,
      I have tested the latest release with this CEWP code placed BELOW the list view web part in a plain list of type “Custom list”.

      Please note that I have linked the scripts from my download location – I recommend you always use local copies.

      <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="https://files.spjsworks.com/files/InlineEditingForSP2007/v2.6/InlineEditingForSP2007.js"></script>
<script type="text/javascript" src="https://files.spjsworks.com/files/spjs-utility/28.02.2012/spjs-utility.js"></script>
<script type="text/javascript">

var argObj = {dateFormat:'m/d/yy',
			  decimalSeparator:'.',
			  boolYesNoText:'Yes|No',
			  labelArr:['Save','Cancel','Clear'],
			  arrToEdit:[],
			  myListGuid:ctx.listName,
			  pinTableHeader:true,
			  hideIdColumn:true};
	initCustomEditFunction(argObj);	

</script>

      You must have the ID column in the view – placed to the far right if you select to hide it – to use this code.

      Alexander

    12. Hello,

      I saved the files locally and referenced them in the code, but again it is just giving me the hover highlight and not the functionality to edit the list items, but this time it is with the updated code versions.

      Just as an FYI I have more then one list on my page, but am only using inline for one list. In the list we would like to have the inline functionality for a dropdown, a boolean and a plain text multi-line.

      I hope the problem can be identified…I really love this code and am so upset it stopped working on my site.

      Thanks again,
      Melissa

    13. Unfortunately I have no problems in my setup – either with a single list or with multiple lists in one view (note that only one list can have the edit functionality activated)

      Is there no changes at all to your setup? – either in the server end or in your browser or anything that could explain why it suddenly stopped working?

      If you send me some screenshots I might be able to help.

      You could also try to set this up in a view with only one list to see that you can make it work in a “clean environment”.

      Alexander

    14. Thank you so much for taking the time to help me. Nothing was changed on the server side nor in my browser, but I can say that before today I didn’t save the code locally it was being referenced from http://ajax.googleapis.com….

      Unfortunately I dont have the capability to provide a screenshot and I already tried to get it to work in a clean environment and it was unsuccessful.

    15. Just did another debug and the following breaks popped up:

      Syntax Error: InlineEditingForSP2007.js, line 2 character 1
      The error points to a } in the code

      Object expected: line 546 character 6
      The error points to initCustomEditFunction(argObj);

  38. Mine also stopped working yesterday. I’m getting an error to use a more recent version of jquery, which I did and now it’s not working at all. Debugger not revealing any breaks.

     
<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.6.4/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="http://office-na.ms.com/ops/operationscontrol/infoctrl/rm/java/spjs-utility.js"></script>
<script type="text/javascript">
// Set variables
	var dateFormat = 'm/d/yy';
	var boolYesNoText = 'Yes|No';
	var arrToEdit = [];

	myListGuid = ctx.listName;

	var myListGuid = "{6DF5CA82-2932-47D3-A064-046CA4F87F6C}"; 

	var pinTableHeader = true;

	var decimalSeparator = '.'; 

	var hideIdColumn = true;	

	initCustomEditFunction(hideIdColumn);
</script>

    1. Hi,
      By “stopped working” you mean it stopped working after the update to the latest version – or did it stop working all by it self?

      Alexander

    2. By the way – you have the wrong CEWP code if you are using the latest version. And you have the variable myListGuid entered two times.

      Alexander

  39. Thanks Alexander. I used the newer code. Now the highlights work, but the editing does not.

    Debugger says:
    ‘undefined’ is null or not an object InlineEditingForSP2007.js, line 320 character 2

    currVal = (thisItemObj[intName]!==null)?thisItemObj[intName]:”;

      1. Where can I email a screenshot? Don’t see an attachment option here. The screenshot would only show the error message:

        Webpage error details

        Message: ‘undefined’ is null or not an object
        Line: 314
        Char: 2
        Code: 0
        URI: /…/infoctrl/rm/java/InlineEditingForSP2007.js

      2. I need screenshots of the CEWP code, the list view in edit mode and the error message. You find my email in the top of the script file.

        Alexander

    2. If anybody has a similar issue to what Eric experienced, I noticed that because I downloaded an older version of the spjs-utility (30.11.2011) that a CAML query attempts to pull ID as a Text field as opposed to an Integer. Updating the spjs-utility file to the latest solved this problem for me.

  41. Hi Alexander!
    Firstly – thank you for pretty nice and usefull solution.

    But I have to state the issue I found – I have a list, where I have a lot of fields, so I have horizontal scroll on page.
    The issue is following – is I scroll horizontally closer to the right, at some point I can’t edit any Date&time field -> after click on field I just see flashing dot (which is also you could see at the upper left corner of normal datepicker, when it’s visible) but no datepicker area.
    Specific moment here is that the position on scrolling area – it’s certanly has some point, starting from I can’t edit Date&time field – the only point I can connect such behaviour is attachement icon on the header of the list: after I scroll away from it – datepicker unavailable.

    I’ve snet you an email with two screenshots, showing the issue.

    Hope you will be available to see have a look on the issue and have time for looking into it.

    Thank you very much in advance for helping and all your SP stuff!!

    1. Got the reason of the issue – if I scroll the page in the way, that I can’t see first letter of list name, on the left side -> then the script stop showing datepicker.
      Even if 1 pixel of first letter is visible – script works!

      In Firefox works fine! And for all other field issue os not relevant.

  43. Alexander, one of my users was using your solution and reported positioning issues, so I advised to upgrade to the latest version. One question: does the header scrolling also work in other browsers, for example Chrome?

    4. Don’t tempt me! My plan is to check the updates (compare the update from the user with the original fields) and do some pre-processing before updating the list. We’ll see how it goes…

    5. Hi,
      If you give me some details I might be able to help you out. If you look at line 361-362 you see that I gather both the DB value and the HTML from the TD.

      Alexander

  46. Alexander, I did a first test with v2.8 and it didn’t work for me. In IE 8 I see the down arrows on hover but get an error on click. In Chrome I don’t get the hover behavior at all.

    2. For the “public” to follow:
      The problem seems to be that you have upgraded from pre v2.6 and not referred spjs-utility.js.

      Yes, the solution supports people pickers, but single choice only.

      Alexander

  47. Alexander, I was wondering what the role of jQuery UI is in this code, and if you have considered a jQuery-ui free solution? The jQuery UI js and css add a lot of weight, for people who don’t use it elsewhere.

    1. Hi,
      jQuery UI is used to to render the datepicker and to handle the autocomplete in the people picker. I haven’t actually considered replacing jQuery UI, but if you have any suggestions, please let me know.

      Regards,
      Alexander

    2. Well, first it’s good to know. If I don’t use these two features, it means that I can get rid of jQuery UI and lose a lot of weight!
      I believe you should also be able to reuse the SharePoint controls, but then it’s a completely different code.

    2. Hi,
      By default, the “Title” columns (all three of them “Title”, “LinkTitle” and “LinkTitleNoMenu” ) should not be editable. Have the script been modified?

      Why use this old version? – have you tested with the latest version?

      Alexander

    3. The old version was the one available when the site was customized, and compatible with the version of jQuery implemented on the site.
      So the Title column cannot be edited inline? In my case, the Title column was renamed to Topic and has the inline editing capability – except that it edits the wrong column!

    4. Hi,
      The reason I disabled the edit capabilities for the title field was because it would interfere with the menu being rendered om the title field.

      The “Title” field in disabled based on the “FromBaseType=TRUE” flag in the field schema.

      I cannot reproduce this behavior, even if I change line 85 to enable the editing feature in the “Title” field (not the one with the menu).

      Which browser is used?

      Alexander

    5. I’ll need to double check, I think I saw the issue in both IE8 and Chrome.
      Is the behavior also disabled for Title fields that don’t have the context menu? In my case the page just displays the title text.
      I’ll do more tests on my side. There are other scripts on the page that might interfere with this one, for example the page also has your attachments script.

    6. I think I found something. The page has two instances (Web Parts) of the same list, and this is what seems to trigger the issue. The two views have several columns in common, just not in the same order.
      Could your code get mixed up because of this? If I remove the second instance, then the behavior is back to normal.

    7. Hi,
      Sorry for the delay. You are right in your assumption. I designed this solution to be able to have multiple web parts in the same page, but i totally forgot to test for multiple instances of the same list. The error is caused by the web parts being identified by the list guid – which in this case is not unique.

      I’ll look into it and see what i can do.

      Alexander

    9. Thx Alexander, I plan to try it today. It won’t work in my prod environment but at least I’ll confirm the fix. One thing I don’t understand: if myListGuid is obsolete, how do you target the correct list in the page?

    10. Hi,
      I’m not sure I understand – did it not work?

      The list guid is now identified by the ctx object that SharePoint supply. I identify the “ctxNum” from the list view header and use this to get the object (yes, I’m using using eval…).

      Alexander

      1. Hi, The ctxNum is passed to the “edit item” function when you click on a row. Alexander

      2. The ctxNum is picked up and applied to the row on hover when the script first iterates trough all web parts in the page. Den 29. aug. 2012 21:46 skrev “Alexander Bautz” følgende:

        > Hi, > The ctxNum is passed to the “edit item” function when you click on a row. > Alexander

  50. Alexander, I know I asked this before, but I ran into issues where this script did not run SPD workflows assigned to the list. For whatever reason, the workflows would never run…

    Here is my workaround…

    Added to customSaveLine function:

    var url;
    $().SPServices({
    operation: “GetListItems”,
    async: false,
    listName=”ListName”,
    CAMLQuery=””+id+”
    completefunc: function (xData,Status) {
    $(xData.responseXML).SPFilterNode(“z:row”).each(function() {
    url=$(this).attrib(“ows_LinkFileName”);
    });
    }
    });
    $().SPServices({
    operation: “StartWorkflow”,
    item: “http://urltoitem” + url,
    templateId: “workflowtemplateid”,
    });

    1. CAMLQuery was blanked out but basically followed:
      Query – Where – Eq – FieldRef Name ID – Value Type Counter (where id was substituted for FieldRef ID)

  51. Hi Alex, thanks for these amazing scripts. My company locks down all server side access to Sharepoint so your code really enhances functionality.

    Feature request: Is it possible to make the number field respect min/max values in the list settings?

    If not, would you consider adding a hard-coded parameter, preferably configurable per field?

  52. Hi Alex,
    Thanks for sharing with us 🙂
    My Issue/Question:
    People or Group(people picker) is giving all users, even though my field is choosing users from share point Group.

    How do i get/choose users from SharePoint Group?

    Please help me on above question.

    Thanks,
    -Naveen.

  53. Hi Alex,

    Thanks for sharing this great solution. At the moment we are one of those which still run 2007 and IE 8.
    As it seems, the v3.0 script doesn’t work in IE 8 (and higher) for me.
    I’ve tried it with Iron (Chrome) and Firefox without problems, only issue is that these are not standard in our organisation.

    Do you know of any current incompatibilities with IE? The CEWP I’ve configured exactly the same as you described on the webpage.

    Thanks in advance for your input.
    – Johan.

      1. Hi Alexander,

        Thanks for your reply. I’ve tried different versions of jQuery to no avail.
        Meantime I found the issue. In “function initCustomEditFunction()” nearly at the end of the function there is a line with “console.log(argObj.arrToEdit);”
        Via stackoverflow.com I found out that IE 8 and console.log aren’t best of friends unless one ‘opens DevTools’.
        http://stackoverflow.com/questions/690251/what-happened-to-console-log-in-ie8

        I removed the line from the .js and it works fine now.

        Thanks again for this great development,
        – Johan.

  54. Using MOSS 2007, I have a list with a date field. When I use Actions > Export to Spreadsheet, the date is adding 4 years to the date. Dates that show as 2014 in the list appear as 2018 in Excel. When I remove the javascript the problem goes away.

    Any help on this would be appreciated!

    CSS and libraries used:
    jquery-ui-1.10.4.min.css
    jquery.min.js (v1.11.0)
    jquery-ui.min.js (v1.10.4)
    inlineEditingForSP2007.js (v25.08.2012)
    spjs-utility.js (v1.179)

    Browsers tested:
    IE 11.0.9600.16476
    FF v27

    Following script is located below the list in a CEWP. This shows using arrToEdit, but I have also tested without any values there. Same result. I have also tried changing the date format to ‘m/d/y’ or ‘m/d/yyyy’.

    var argObj = {dateFormat:’m/d/yy’,
    decimalSeparator:’.’,
    boolYesNoText:’Yes|No’,
    labelArr:[‘Save’,’Cancel’,’Clear’],
    arrToEdit:[‘Status’,’AssignedTo’,’Email’,’Phone_x0020_Number’],
    pinTableHeader:true,
    hideIdColumn:true};
    initCustomEditFunction(argObj);

    1. FYI… the script I pasted in the original post doesn’t show all of the content – library references and tags got removed when I submitted the comment. My script matches the v3.0+ template above almost exactly.

  55. Hi Alex,

    I just can’t get this script to work. I am currently using WSS3.0 and I am putting the code in a txt file in a CEW under my list (allitems.apsx) and it dosent do anything.

    Is there something I am missing?

    <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 LANGUAGE=”JavaScript” SRC=”Scripts/Inline/InlineEditingForSP2007.js”></SCRIPT>
    <SCRIPT LANGUAGE=”JavaScript” SRC=”Scripts/Inline/spjs-utility.js”></SCRIPT>
    <script type=”text/javascript”>

    var argObj = {dateFormat:’mm/dd/yyyy’,
    decimalSeparator:’.’,
    boolYesNoText:’Yes|No’,
    labelArr:[‘Save’,’Cancel’,’Clear’],
    arrToEdit:[],
    pinTableHeader:true,
    hideIdColumn:true};
    initCustomEditFunction(argObj);

    </script>

      1. No errors are showing up. And I test my jquery scripts and they are working fine so not sure what im missing.

      2. Its hard to tell what it could be, but it may be some interference with other code, or an issue with the list view. Try setting up a new fresh list to test with.

        Alexander

  56. Ill give that a try. But just to make sure, what I did is created a new list and in SharePoint Designer added the CEW webpart under the list. Created a text file with the code I provided above and it does nothing. I checked in Firefox and the referenced files are all loading.

    I am using:
    SPJS-Uitlity.js – v1.206
    InlineEditingFor2007.js – v3.1

    Now I did not touch any configurations from your script. Am I suppose to provide a GUID? Can you let m eknow if I am following proper steps to set this up? Also would you have screenshots of what the end results should look like just to make sure I know what im looking at?

    1. Created a new list and same thing. No errors and nothing happens. I am putting the script on the allitems.aspx page and when I click on td text nothing happens.

      1. Hi,
        It is hard to tell what could cause this without a “hands on approach”.

        I have not tested this solution myself in a few years, and this problems could be caused by changes made to jQuery since I posted this code, or incompatibility with the browser you use. There is no problems that I know of, but something is obviously not right.

        If you are using the latest version of jQuery, try using an older version – like 1.6.4 and see.

        You can also try an older version of spjs-utility.js to see if this makes any difference.

        If this does not help, I’m afraid I cannot be of more assistance.

        Alexander

  57. Hi there me again, still havent had any luck with this. Can I just confirm if this works on webparts? I currently have the list displayed in a webpart and just wondering if that could be why.

  58. HI there,

    Im still trying to figure this out. Can you let me know if I missed any steps here? I added the following scripts in a Content Editor Webpart and placed it under my list. I also added the ID completely to the right on my row so thats its the last column. I made sure that all the scripts included are loaded successfully in firefox. I tested both IE8 and Firefox and both do nothing. Any ideas what I could be missing?

    var argObj = {

    dateFormat:’m/d/yy’,
    decimalSeparator:’.’,
    boolYesNoText:’Yes|No’,
    labelArr:[‘Save’,’Cancel’,’Clear’],
    arrToEdit:[],
    pinTableHeader:true,
    hideIdColumn:true

    };

    initCustomEditFunction(argObj);

    1. var argObj = {

      dateFormat:’m/d/yy’,
      decimalSeparator:’.’,
      boolYesNoText:’Yes|No’,
      labelArr:[‘Save’,’Cancel’,’Clear’],
      arrToEdit:[],
      pinTableHeader:true,
      hideIdColumn:true

      };

      initCustomEditFunction(argObj);

      1. Hi,
        Yes, It is supposed to work in a web part page, but when you are struggling to get it to work, you should set it up an a plain list view first to confirm that you are able to set it up correctly.

        Any errors in the developer console (hit F12 > Console)?

        Alexander

  59. When I load up the console in Firefox there are no errors. But when I load this up in IE8 I get a sintax error on this line decimalSeparator:’.’, not quite sure why since everything is exactly as per your code.

    I tested with every single verion of the spjs-utility.js you released and saw no difference. I tested as well with jquery version 1.6.4 and up and no difference. I tested this on webparts and on a regular list view and still no difference. I dont even get the row being highlighted.

    I was looking at your code as well to see how it captures my ID and saw you were using http://schemas.microsoft.com/sharepoint/soap/ and http://schemas.microsoft.com/sharepoint/soap/GetList, these link are no longer working it seems not sure if that could be why.

    I also left arrToEdit:[], empty which I believe by default the script will try to edit all field in this case but let me know if I was suppose to add something there.

  60. Hi Alexandre,

    I finally got it working, for some reason browsers were having issues with single quotes in your code. Here is my final code that got this working. Still testing everything but it looks good so far.

    <link type=”text/css” href=”Scripts/jquery-ui/jquery-ui.css” rel=”stylesheet” />
    <SCRIPT LANGUAGE=”JavaScript” SRC=”Scripts/jquery/jquery-1.7.2.min.js”></SCRIPT>
    <SCRIPT LANGUAGE=”JavaScript” SRC=”Scripts/jquery-ui/jquery-ui.min_1.8.23.js”></SCRIPT>
    <SCRIPT LANGUAGE=”JavaScript” SRC=”Scripts/Inline/InlineEditingForSP2007.js”></SCRIPT>
    <SCRIPT LANGUAGE=”JavaScript” SRC=”Scripts/Inline/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>

  61. Hi Alexandre,

    I have a webpart which was converted to XSLT and noticed that it breaks the scripts. I know someone had already asked the question but how do you make this work on XSLT webparts or what are some work arounds?

    1. Hi,
      I’m glad you figured the script out, but unfortunately I cannot help you with the XSLT view. The code is created for out of the box views, and the variations in custom made XSLT views are not supported.

      You are however welcome to use the script as a base, and adapt it to your need.

      Alexander

    1. You should be able to use the functionality in a web part page like you describe.

      Please note that This solution (and SP2007) is starting to age, and unfortunately I do not have time to maintain this solution. This means I cannot fix bugs or add / change the functionality for you.

      Alexander

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.