5

I am working on a list view, where i have a choice column named TrackingStatus. Now for this choice column i defined the default value to be In Progress from the site columns settings.

But i have noticed that inside the Quick edit grid the default value for the TrackingStatus column will not be rendered (unlike inside the built-in create and edit forms).. so i tried to implement the default values using JS Link as follow:

I upload the following script inside my site collection:

(function () {
    alert("1");
    var overrideContext= {};

    overrideContext.Templates = overrideContext.Templates || {};

    overrideContext.Templates.Fields = {
        "TrackingStatus": {
            "View": function (ctx) {if(ctx.CurrentItem.your_column == "")
        return "In Progress";
}
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

})();

Then I edit my list view WebPart and I provide the following to reference the above JSlink under the WebPart Miscellaneous section.:

~sitecollection/Resources/defaultvalues.js

But the JS Link is not having any effect in respect to applying default values for my column, although when I checked the page source I can see that the defaultvalues.js is being loaded and i got the alert(1) which I intentionally added inside the JS Link.

How can I define default values for my choices columns inside the Quick Edit grid?

EDIT.

Now i tried this script, where i added it to the miscellaneous tab , and where i replaced the drop-down field with the Title field to eliminate any problem related to the field's internal name VS display name:-

(function () {

    var overrideCtx = {};
    overrideCtx.Templates = {}; 
    overrideCtx.Templates.OnPreRender = function(ctx) {
        if (!ctx.inGridMode)
        {
            return;
        }
        var statusField = ctx.ListSchema.Field.filter(function(f) {
            return f.Name === 'Title';
        });
        if (statusField.length > 0) {
            for (var i = 0; i < ctx.ListData.Row.length; i++)
            {
                if (ctx.ListData.Row[i].Title == "")
                {               
                    ctx.ListData.Row[i].Title = "Test123";
                }               
            }            
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

SP.SOD.executeFunc('clienttemplates.js', 'SPClientTemplates.TemplateManager.RegisterTemplateOverrides', function() {
        var alreadyAttachedEvent = false;
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
            OnPostRender: function(ctx) {               
                if (ctx.enteringGridMode || !ctx.inGridMode || alreadyAttachedEvent)
                  return;
                var jsGrid = null;
                for(var v in g_SPGridInitInfo)
                {
                    var jsGridContainer = $get("spgridcontainer_" + g_SPGridInitInfo[v].jsInitObj.qualifier);
                    var jsGrid = jsGridContainer.jsgrid;
                    break;
                }

                jsGrid.AttachEvent(SP.JsGrid.EventType.OnCellEditCompleted, function(args) {
                    var rec = jsGrid.GetRecord(args.recordKey);
                    if (!rec.properties["Title"].localizedValue)
                    {
                        var update = SP.JsGrid.CreateUnvalidatedPropertyUpdate(args.recordKey,'Title',"Test123",false);
                        jsGrid.UpdateProperties([update], SP.JsGrid.UserAction.UserEdit);
                    }
                });
                alreadyAttachedEvent = true;
            }
        });

 });

now the above script have worked partially, where i can see these issues now:-

  1. the defualt value will not be shown unless i enter a value for one field inside the new row. So is there a way to allow the defualt value to be shown directly once i click on "edit this list" >> and i navigate to the new row inside the grid ?

  2. now when i replace the Title with the TrackingStatus the script will not populate any defualt values for the TrackingStatus dropdwon choices. so I am not sure if the problem is related to setting a defualt value for a drop-down field? or the problem that in my TrackingStatus drop-down field case the field internal name = TrackingStatus while the display name = Tracking Status unlike the title which have the same internal and display name , if so then can you adivce where i need to specify the internal name and where i need to specify the display name inside the script?

  • 1
    Microsoft sure dropped the ball with documenting CSR in SharePoint 2013 – wjervis Mar 9 '17 at 16:09
  • @wjervis can you advice what do you mean? – john Gu Mar 13 '17 at 1:39
  • 1
    I mean that documentation on CSR (Client Side Rendering, which includes JSLinks) is sparse. – wjervis Mar 13 '17 at 12:26
  • @wjervis totally agree with you,, and seems i can not use CSR to force my Quick Edit grid to show defualt values... i tired the 2 approaches mentioned on Damjan Tomic but they did not work... – john Gu Mar 13 '17 at 12:36
6
+50

This script should do it:

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {}; 
    overrideCtx.Templates.OnPreRender = function(ctx) {
        if (!ctx.inGridMode)
        {
            return;
        }
        var statusField = ctx.ListSchema.Field.filter(function(f) {
            return f.Name === 'TrackingStatus';
        });
        if (statusField.length > 0) {
            for (var i = 0; i < ctx.ListData.Row.length; i++)
            {
                if (ctx.ListData.Row[i].TrackingStatus == "")
                {               
                    ctx.ListData.Row[i].TrackingStatus = "In Progress";
                }               
            }            
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

The important thing to note is that the values are not saved to the list until you make some change to the row.

UPDATE: There is another approach, that involves attaching the event to the jsGrid control, which checks for the field value and updates it if it's empty.

SP.SOD.executeFunc('clienttemplates.js', 'SPClientTemplates.TemplateManager.RegisterTemplateOverrides', function() {
        var alreadyAttachedEvent = false;
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
            OnPostRender: function(ctx) {               
                if (ctx.enteringGridMode || !ctx.inGridMode || alreadyAttachedEvent)
                  return;
                var jsGrid = null;
                for(var v in g_SPGridInitInfo)
                {
                    var jsGridContainer = $get("spgridcontainer_" + g_SPGridInitInfo[v].jsInitObj.qualifier);
                    var jsGrid = jsGridContainer.jsgrid;
                    break;
                }

                jsGrid.AttachEvent(SP.JsGrid.EventType.OnCellEditCompleted, function(args) {
                    var rec = jsGrid.GetRecord(args.recordKey);
                    if (!rec.properties["TrackingStatus"].localizedValue)
                    {
                        var update = SP.JsGrid.CreateUnvalidatedPropertyUpdate(args.recordKey,'TrackingStatus',"In Progress",false);
                        jsGrid.UpdateProperties([update], SP.JsGrid.UserAction.UserEdit);
                    }
                });
                alreadyAttachedEvent = true;
            }
        });
 });

UPDATE 2:

I put both scripts to the same js file and attached them to the list webpart through Miscellaneous -> Jslink (didn't use powershell for this).

The first approach will work with old items which don't have the value for TrackingStatus field. The second approach changes the value of the TrackingStatus field after you edit any other field in the same row and it works with old and new rows (you could also use some other event. Here's the list of all events supported by JSGrid).

Also, please double check your column name and change the script accordingly, since you wrote "Tracking Status" (with space) in comments, and in the question it was TrackingStatus.

  • thanks for the reply. will try your approaches .. but my first question will the 2 approaches provide the same functionalities, or they will work differently ? second question ,, now in the first script i can attache the jslink to filed using power shell.. but not sure how i can install/attach the second script to my grid ??? – john Gu Mar 13 '17 at 1:41
  • now i tried the second script, where i edit the webpart where the grid is being shown, and under "Miscellaneous" tab >> "JSLINK" i referenced the script ,, but the script did not have any effect... can you advice on this ? – john Gu Mar 13 '17 at 11:24
  • I also added the first script then i link it with the site column as follow $web = Get-SPWeb servername $field = $web.Fields["Tracking Status"] $field.JSLink = "~siteCollection/Style Library/JS/MyScript.js" $field.update($true) now i can see that the script is being referenced ,, but it will not set any defualt values!! – john Gu Mar 13 '17 at 11:41
  • are you able to check my comments ? – john Gu Mar 13 '17 at 13:59
  • 1
    Did you try to debug (with breakpoints in developer tools) the actual places in code where the values are set (inside the for loop in the first script, and the body of the event function in second)? – Damjan Tomic Mar 14 '17 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.