JavaScript, Sharepoint

SharePoint 2013 – Disable multiple columns in Quick Edit

Until SP 2010, the datasheet was quite useful but rudimentary. It was an ActiveX control that did not allow any alterations to be made. With 2013, Microsoft came up with a slightly (very slightly) better replacement called the Quick Edit.

Quick Edit uses HTML5, has a better layout and uses JSGrid to render the data. Check this post for details about that ( chuvash.eu/2014/11/27/jsgrid-basics/ ).

The author, Anatoly Mironov, has another post that explains how to lock a single field in the Quick Edit. ( http://chuvash.eu/2014/11/28/disabling-a-column-in-quick-edit/ ).

However, if you are like me and promised the client all sorts of functionality in the Quick Edit, read on.

To disable multiple fields in your Quick List,

Step 1. Know how to edit a List View.

Open the list view (never ever ever edit the AllItems view) and from the top-right, click on the gear icon and select “Edit Page”.

Step 2. The code

This is the code. It can be improvised a thousand times. It works. If you can help me improve it, that would be fabulous.

var updateViewerFields=["Column 1 Display Name","Column 2 Display Name",
          "Column 3 Display Name",....."Column N Display Name"];
(function updateView() {
    var overrideContext = {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.OnPreRender = function(ctx) {
 
       for(j=0; j<ctx.ListSchema.Field.length; j++)
       {
          var f = ctx.ListSchema.Field[j];
          for(i=0;i<updateViewerFields.length;i++){
             if(f.DisplayName == updateViewerFields[i]){
                f.AllowGridEditing=false;
             }
          }
       }
    } 
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
 })(); 

Step 3. Adding the code to the List View

Place the code in a .txt file. Be sure to enclose it in <Script> tags. Upload to a document library and then paste its URL in the Content Link of the CEWP. Notice the absence of body onload or $(document).ready functions. We need the function to run inline as soon as it is encountered before the rendering of the JSGrid begins. I like the simple way of doing it, you might have your own preference.

Step 4. Stop Editing

Save the changes by clicking on ‘Stop Editing’ under the ‘Page’ Heading in the top-left.

If you have made the changes correctly, they will start reflecting immediately.

Now, what if Minimal Download Strategy is enabled in your organization?

That, my friend, is a post for another time.

Advertisements

18 thoughts on “SharePoint 2013 – Disable multiple columns in Quick Edit

  1. Hi, thanx for this. But it didn´t quite work for me. This is what I loaded as a text file into the documents library (library has check out required). I assigned rights for that file just for me (the list views were created by others as public views but I have site collection admin rights on that SP site and placed the URL into CEWP in that view and clicked stop Editing. So here is the code I used

    var updateViewerFields=[“Actual Completion Date”,”Date of Update”,
    “Start Date”];
    (function updateView() {
    var overrideContext = {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.OnPreRender = function(ctx) {

    for(j=0; j<ctx.ListSchema.Field.length; j++)
    {
    var f = ctx.ListSchema.Field[j];
    for(i=0;i<updateViewerFields.length;i++){
    if(f.DisplayName == updateViewerFields[i]){
    f.AllowGridEditing=false;
    }
    }
    }
    }
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
    })();

    but the columns are still editable.
    Any thoughts please?
    Many thanx again

    1. Ohkay. The code looks correct at first glance.
      Some troubleshooting steps:
      1. Make sure the code is enclosed in a script tag

      2. Try adding a few alerts in different sections of the code to see whether any part of the code is not being executed.

      Hope this helps 🙂

      1. Thanx for quick answer. I enclosed the code in code tags for some reason it didn´t show here.
        Second, can you please elaborate more on point 2? All my knowledge about this kinda scripting (I am more of a VBA guy really) is googled so at this point I have no idea how to follow your suggestion.

        Thanx again

        Jan

      2. the code should be written as

        < script type="text/javascript" >
        ...Your code here
        < /script >

        Point 2 is about debugging. There are a variety of reasons the code might not execute. We normally use a alert("Text here" ) method to display the value of variables or log messages.
        You can add it anywhere on your code to understand which part of your code is being executed or not.
        Once you are comfortable with that, you can try console.log() to note messages in a proper developer way 😛

  2. I, too, cannot make this code work. I was quite hopeful!
    Running SP2013
    Added the alert suggestion. Only receive the first alert. 😦
    Name of txt file: hf_disablecolumns.txt
    Code in the txt file:

    var updateViewerFields=[“fld1-2″,”fld2-2″,”fld3-2″,”fld4-2″,”fld5-2″,”Current Status”];
    alert(“Text here 1”)

    (function updateView() {
    var overrideContext = {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.OnPreRender = function(ctx) {

    for(j=0; j<ctx.ListSchema.Field.length; j++)
    {
    var f = ctx.ListSchema.Field[j];
    for(i=0;i<updateViewerFields.length;i++){
    if(f.DisplayName == updateViewerFields[i]){
    f.AllowGridEditing=false;
    }
    }
    }
    }
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
    })();

    alert("Text here 2")

  3. I left a reply earlier stating this code didn’t work for me. It does now, and let me tell you why:
    My list page included another filtered list web part. This extra list web part was prohibiting your code from working.
    Solution: I removed my additional filtered list web part, applied your code via CEWP link, and reinserted the filtered list web part.
    Viola! It works!

      1. Yes, I have included those tags in that text file with the script.
        And Yes, I too have another web part there…script editor and the following script in it

        ExecuteOrDelayUntilScriptLoaded(overrideSurfacePivotCount, ‘clienttemplates.js’);

        function overrideSurfacePivotCount() {
        ClientPivotControl.prototype.SurfacedPivotCount = 8;
        };

        Which I need to display more then 3 views which are available on that list.
        Is there a way how to merge this one with the one which disables the columns in Quick Edit? I sort of need both..
        Many thanx
        Jan

  4. I was also facing problem to make it work, I was using type=”text\javascript” in script tag where it shud be “text/javascript” in script tag. the solution works great. Thanks a lot for sharing the knowledge.

  5. What I did was simply to use a calculated column. Then I just set it to the name of the column that I wanted to disable and added it to the view. I then made the original column hidden. You can not edit a calculated column in quick view.

  6. I wanted same ,that disable columns in quick edit but on button click(click event)
    I have added one button “submit” I just wanted that your code should be run and make column read only on submit button click event

    so what should I do?

      1. Possible? Definitely. However, I haven’t been able to do it using the jsgrid code.

        Using jQuery, I could select columns numbers that needed to be hidden and then set their css as “display:none”.
        There must be a better way but I haven’t seen it yet.

    1. I would tend to use a JavaScript/client side script for making the fields read-only. For a more stable solution, clicking on submit would update a hidden field in the row. The hidden field value would be checked to validate whether the columns should be editable or read-only.

  7. Can you tweak it for Rows?. I wanted readonly rows based on certain condition or values in the cells. please it would be a great help. thanks

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s