Unable to write a jslink which defines a default values for my Dropdown columns inside the Quick Edit grid

Question

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?

Answer 1

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.