Quick Edit Mode \ Validation (JS)

Question

Is it possible to make validation via JS when editing items in quick edit mode?

Like if this field is empty then during attempt to save, popup error message.

Looking for a complete solution to base on.

Answer 1

Hi,

We can use JSLink to achieve it.

Here is a blog for your reference:

SharePoint 2013 Quick Edit JavaScript Validation

http://sharepointbitsandbytes.com/2014/01/sharepoint-2013-quick-edit-javascript-validation/

Code:

var spCtx;
var fieldContext;
var cellContext;

var currentWeb;
var rootWeb;

var operationManagersSiteGroup;
var operationManagersGroupName = "TOMI Operation Managers";
var currentUserGroups;

var projectOwnerId;
var currentUser;
var currentUserId;
var currentUserLookupId;
var isUserProjectOwner = false;
var isUserTaskAsignee = false;
var IsUserOperationManager = false;

var rootWebProperties;
var projectWebProperties;

var projectDashboardWebUrl;
var projectDashboardWebUrlWebPropertyKey = "TOMI.Settings.ProjectDashboardWebServerRelativeUrl";

var projectItemId;
var projectItemIdWebPropertyKey = "TOMI.Settings.ProjectItemLookupId";
var projectItem;

var projectListTitle = "Projects";
var projectOwner;

(function () {

    if (typeof SPClientTemplates === 'undefined')
        return;
    
    fieldContext = {};
    fieldContext.Templates = {};

    fieldContext.Templates.Fields = {
        "LinkTitle": {
            "View": TitleFieldReadOnlyViewTemplate,
            'DisplayForm': null,
            'NewForm': null,
            'EditForm': null
        },
        "Title": {
            "View": TitleFieldReadOnlyViewTemplate,
            'DisplayForm': null,
            'NewForm': null,
            'EditForm': null
        },
        "StartDate": {
            "View": StartDateFieldReadOnlyViewTemplate,
            'DisplayForm': null,
            'NewForm': null,
            'EditForm': null
        },
        "DueDate": {
            "View": DueDateFieldReadOnlyViewTemplate,
            'DisplayForm': null,
            'NewForm': null,
            'EditForm': null
        },
        "Body": {
            "View": DescriptionFieldReadOnlyViewTemplate,
            'DisplayForm': DescriptionFieldReadOnlyViewTemplate,
            'NewForm': null,
            'EditForm': null
        },
        "AssignedTo": {
            "View": AssignedToFieldSingleValueReadOnlyViewTemplate,
            'DisplayForm': null,
            'NewForm': null,
            'EditForm': null
        },
        "CPProjectTaskApprovers": {
            "View": CPProjectTaskApproversReadOnlyViewTemplate,
            'DisplayForm': null,
            'NewForm': null,
            'EditForm': null
        },
        "Status": {
            "View": StatusFieldReadOnlyViewTemplate,
            'DisplayForm': null,
            'NewForm': null,
            'EditForm': null
        },
        "PercentComplete": {
            "View": PercentCompleteFieldReadOnlyViewTemplate,
            'DisplayForm': null,
            'NewForm': null,
            'EditForm': null
        }/*,
        "CPProjectLookUp": {
            "View": CPProjectLookUpFieldReadOnlyViewTemplate,
            'DisplayForm': null,
            'NewForm': null,
            'EditForm': null
        }*/
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext);
       
    $(document).ready(function () {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', onInit);
    });
    
})();

function onInit() {
    spCtx = new SP.ClientContext.get_current();
    currentWeb = spCtx.get_web();
    spCtx.load(currentWeb);

    currentUser = currentWeb.get_currentUser();
    spCtx.load(currentUser);

    allGroups = currentWeb.get_siteGroups();
    spCtx.load(allGroups);

    projectWebProperties = currentWeb.get_allProperties();
    spCtx.load(projectWebProperties);
    
    spCtx.executeQueryAsync(Function.createDelegate(this, onGetWebPropertyProjectItemIdSucceeded), Function.createDelegate(this, onFail));
}

function onGetWebPropertyProjectItemIdSucceeded() {
    projectItemId = projectWebProperties.get_item(projectItemIdWebPropertyKey);
    currentUserId = currentUser.get_userId().get_nameId();

    currentUserGroups = currentUser.get_groups();
    spCtx.load(currentUserGroups);
    
    siteGroupCollection = spCtx.get_web().get_siteGroups();
    operationManagersSiteGroup = siteGroupCollection.getByName(operationManagersGroupName);
    spCtx.load(operationManagersSiteGroup);
    
    rootWeb = spCtx.get_site().get_rootWeb();
    spCtx.load(rootWeb);

    rootWebProperties = rootWeb.get_allProperties();
    spCtx.load(rootWebProperties);

    spCtx.executeQueryAsync(Function.createDelegate(this, onGetWebPropertyProjectDashboardWebUrlSucceeded), Function.createDelegate(this, onFail));
}

function onGetWebPropertyProjectDashboardWebUrlSucceeded() {
            
    var userGroupsEnumerator = currentUserGroups.getEnumerator();
    while (userGroupsEnumerator.moveNext()) {
        var userGroup = userGroupsEnumerator.get_current();
        if (userGroup.get_id() == operationManagersSiteGroup.get_id()) {
            IsUserOperationManager = true;
        }
    }
        
    projectDashboardWebUrl = rootWebProperties.get_item(projectDashboardWebUrlWebPropertyKey);
    var serverRelativeUrl = rootWeb.get_serverRelativeUrl().replace(/\/$/, "");
    var projectDashboarWeb = spCtx.get_site().openWeb(serverRelativeUrl + projectDashboardWebUrl);
    var projectList = projectDashboarWeb.get_lists().getByTitle(projectListTitle);
    projectItem = projectList.getItemById(projectItemId);

    spCtx.load(projectList);
    spCtx.load(projectItem);

    spCtx.executeQueryAsync(Function.createDelegate(this, onProjectLoaded), Function.createDelegate(this, onFail));
}

function onProjectLoaded() {
    var projectOwnerFieldValue = projectItem.get_item("CPProjectOwner");

    projectOwner = rootWeb.getUserById(projectOwnerFieldValue.get_lookupId());
    spCtx.load(projectOwner);
    spCtx.executeQueryAsync(onUserLoaded, onFail);
}

function onUserLoaded() {
    projectOwnerId = projectOwner.get_userId().get_nameId();

    if (currentUserId == projectOwnerId) {
        isUserProjectOwner = true;
    }
} 

function onFail(sender, args) {
    alert('Request failed.' + args.get_message() + '\n' + args.get_stackTrace());
}

function TitleFieldReadOnlyViewTemplate(ctx) {
    var columnName = "Title";
    var quickEditId = "QEDIT_TITLE";

    ReadOnlyEditBoxViewTemplateInstance(ctx, columnName, quickEditId);

    return RenderField(ctx, columnName);
}

function StartDateFieldReadOnlyViewTemplate(ctx) {
    var columnName = "StartDate";
    var quickEditId = "QEDIT_STARTDATE";

    ReadOnlyDateViewTemplateInstance(ctx, columnName, quickEditId);

    return RenderField(ctx, columnName);
}

function DueDateFieldReadOnlyViewTemplate(ctx) {
    var columnName = "DueDate";
    var quickEditId = "QEDIT_DUEDATE";

    ReadOnlyDateViewTemplateInstance(ctx, columnName, quickEditId);

    return RenderField(ctx, columnName);
}

function DescriptionFieldReadOnlyViewTemplate(ctx) {

    var columnName = "Body";
    var quickEditId = "QEDIT_BODY";

    //ReadOnlyMultilineRichTextViewTemplateInstance(ctx, columnName, quickEditId);

    return RenderField(ctx, columnName);
}

function StatusFieldReadOnlyViewTemplate(ctx) {

    var columnName = "Status";
    var quickEditId = "QEDIT_STATUS";

    ReadOnlyForAllEditBoxViewTemplateInstance(ctx, columnName, quickEditId);

    return RenderField(ctx, columnName);
}

function PercentCompleteFieldReadOnlyViewTemplate(ctx) {

    var columnName = "PercentComplete";
    var quickEditId = "QEDIT_PERCENTCOMPLETE";

    ReadOnlyForAllEditBoxViewTemplateInstance(ctx, columnName, quickEditId);

    return RenderField(ctx, columnName);
}

function CPProjectLookUpFieldReadOnlyViewTemplate(ctx) {

    var columnName = "CPProjectLookUp";
    var quickEditId = "QEDIT_PROJECT";

    ReadOnlyForAllEditBoxViewTemplateInstance(ctx, columnName, quickEditId);

    return RenderField(ctx, columnName);
}

///////
function CPProjectTaskApproversReadOnlyViewTemplate(ctx) {

    cellContext = ctx;
    var columnName = "CPProjectTaskApprovers";
    var quickEditId = "QEDIT_TASKAPPROVERS";

    
        SP.SOD.executeOrDelayUntilScriptLoaded(function () {
            SP.GanttControl.WaitForGanttCreation(function (ganttInstance) {

                ChangeColumnGetEditControlName(ganttInstance, columnName, quickEditId);
                
                SP.JsGrid.PropertyType.Utils.RegisterEditControl(quickEditId, function (ctx) {
                    var editorInstance = new SP.JsGrid.EditControl.EditBoxEditControl(ctx, null);

                    editorInstance.SetValue = function (value) {
                        if (cellContext.inGridMode === true) {
                            _cellContext = editorInstance.GetCellContext();
                            if ((IsUserOperationManager == true) || (isUserProjectOwner == true)) {
                                _cellContext.SetCurrentValue({ localized: value });
                            }
                            else if (value != _cellContext.originalValue.localized) {
                                ctx.jsGridObj.SetCellError(_cellContext.record.recordKey, columnName, "You cannot change the value of this field");
                            }
                        }
                    };

                    editorInstance.Unbind = function () {
                        if (cellContext.inGridMode === true) {
                            _cellContext = editorInstance.GetCellContext();
                            if (_cellContext != null) {
                                ctx.jsGridObj.ClearAllErrorsOnCell(_cellContext.record.recordKey, columnName);
                            }
                        }
                    };

                    //editorInstance.SetSize = function (width, height) {

                    //    editorInstance._cellContext = _cellContext;

                    //    try {
                    //        //if (_cellContext == null) {
                    //        //    _cellContext = editorInstance.GetCellContext();
                    //        //}
                    //        if ((currentUserIsOperationManager == true) || (isUserProjectOwner == true)) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "TRUE";
                    //        }
                    //        else if (isUserTaskAsignee == true) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "FALSE";
                    //        }
                    //    } catch (err) { }

                    //    //do standard stuff
                    //    var inputElement = editorInstance.GetInputElement();

                    //    editorInstance.SetProperties(inputElement, ["style", "width"], width + 'px');
                    //    editorInstance.SetProperties(inputElement, ["style", "height"], height + 'px');
                    //};

                    //editorInstance.SetProperties = function (obj, props, val) {
                    //    for (var i = 0; i < props.length - 1; i++) {
                    //        obj = obj[props[i]];
                    //    }
                    //    obj[props[props.length - 1]] = val;
                    //};

                    //editorInstance.BindToCell = function (cellContext) {
                    //    _cellContext = cellContext;

                    //    try {
                    //        if (_cellContext == null) {
                    //            _cellContext = editorInstance.GetCellContext();
                    //        }
                    //        if ((currentUserIsOperationManager == true) || (isUserProjectOwner == true)) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "TRUE";
                    //        }
                    //        else if (isUserTaskAsignee == true) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "FALSE";
                    //        }
                    //    } catch (err) { }

                    //    var inputElement = editorInstance.GetInputElement();
                    //    editorInstance.SetSize(_cellContext.cellWidth - 10, _cellContext.cellHeight - 6);
                    //    if (_cellContext.field.textDirection != SP.JsGrid.TextDirection.Default) {
                    //        editorInstance.SetProperties(inputElement, ["style", "direction"], _cellContext.field.textDirection == SP.JsGrid.TextDirection.RightToLeft ? 'rtl' : 'ltr');
                    //    }
                    //    inputElement.value = '';
                    //};

                    return editorInstance;
                }, []);

            });
        }, "spgantt.js");

    return RenderField(ctx, columnName);
} 

function AssignedToFieldSingleValueReadOnlyViewTemplate(ctx) {

    cellContext = ctx;
    var columnName = "AssignedTo";
    var quickEditId = "QEDIT_ASSIGNEDTO";

    
        SP.SOD.executeOrDelayUntilScriptLoaded(function () {
            SP.GanttControl.WaitForGanttCreation(function (ganttInstance) {
                
                ChangeColumnGetEditControlName(ganttInstance, columnName, quickEditId);

                SP.JsGrid.PropertyType.Utils.RegisterEditControl(quickEditId, function (ctx) {
                    var editorInstance = new SP.JsGrid.EditControl.EditBoxEditControl(ctx, null);

                    editorInstance.GetOriginalValue = function () {
                        if (cellContext.inGridMode === true) {
                            _cellContext.field.multiValue = false;
                            _cellContext.field.csrInfo.AllowMultipleValues = "0";
                            return _cellContext.originalValue.localized;
                        }
                    };

                    editorInstance.SetValue = function (value) {
                        if (cellContext.inGridMode === true) {
                            _cellContext = editorInstance.GetCellContext();
                            if ((IsUserOperationManager == true) || (isUserProjectOwner == true)) {
                                _cellContext.SetCurrentValue({ localized: value });
                            }
                            else if (value != _cellContext.originalValue.localized) {
                                ctx.jsGridObj.SetCellError(_cellContext.record.recordKey, columnName, "You cannot change the value of this field");
                            }
                        }
                    };

                    editorInstance.Unbind = function () {
                        if (cellContext.inGridMode === true) {
                            _cellContext = editorInstance.GetCellContext();
                            if (_cellContext != null) {
                                ctx.jsGridObj.ClearAllErrorsOnCell(_cellContext.record.recordKey, columnName);
                            }
                        }
                    };

                    //editorInstance.SetSize = function (width, height) {

                    //    try {
                    //        //if (_cellContext == null) {
                    //        //    _cellContext = editorInstance.GetCellContext();
                    //        //}
                    //        if ((currentUserIsOperationManager == true) || (isUserProjectOwner == true)) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "TRUE";
                    //        }
                    //        else if (isUserTaskAsignee == true) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "FALSE";
                    //        }
                    //    } catch (err) { }

                    //    //do standard stuff
                    //    var inputElement = editorInstance.GetInputElement();

                    //    editorInstance.SetProperties(inputElement, ["style", "width"], width + 'px');
                    //    editorInstance.SetProperties(inputElement, ["style", "height"], height + 'px');
                    //};

                    //editorInstance.SetProperties = function (obj, props, val) {
                    //    for (var i = 0; i < props.length - 1; i++) {
                    //        obj = obj[props[i]];
                    //    }
                    //    obj[props[props.length - 1]] = val;
                    //};

                    //editorInstance.BindToCell = function (cellContext) {
                    //    _cellContext = cellContext;

                    //    try {
                    //        //if (_cellContext == null) {
                    //        //    _cellContext = editorInstance.GetCellContext();
                    //        //}
                    //        if ((currentUserIsOperationManager == true) || (isUserProjectOwner == true)) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "TRUE";
                    //        }
                    //        else if (isUserTaskAsignee == true) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "FALSE";
                    //        }
                    //    } catch (err) { }

                    //    var inputElement = editorInstance.GetInputElement();
                    //    editorInstance.SetSize(_cellContext.cellWidth - 10, _cellContext.cellHeight - 6);
                    //    if (_cellContext.field.textDirection != SP.JsGrid.TextDirection.Default) {
                    //        editorInstance.SetProperties(inputElement, ["style", "direction"], _cellContext.field.textDirection == SP.JsGrid.TextDirection.RightToLeft ? 'rtl' : 'ltr');
                    //    }
                    //    inputElement.value = '';
                    //};

                    return editorInstance;
                }, []);

            });
        }, "spgantt.js");

    return RenderField(ctx, columnName);
}

function ReadOnlyEditBoxViewTemplateInstance(ctx, columnName, quickEditId) {

    cellContext = ctx;

        SP.SOD.executeOrDelayUntilScriptLoaded(function () {
            SP.GanttControl.WaitForGanttCreation(function (ganttInstance) {

                ChangeColumnGetEditControlName(ganttInstance, columnName, quickEditId);
                
                    SP.JsGrid.PropertyType.Utils.RegisterEditControl(quickEditId, function (ctx) {
                        var editorInstance = new SP.JsGrid.EditControl.EditBoxEditControl(ctx, null);

                        editorInstance.SetValue = function (value) {
                            if (cellContext.inGridMode === true) {
                                _cellContext = editorInstance.GetCellContext();
                                editorInstance._cellContext = _cellContext;
                                if (IsUserOperationManager == true) {
                                    _cellContext.SetCurrentValue({ localized: value });
                                }
                                else if (value != _cellContext.originalValue.localized) {
                                    ctx.jsGridObj.SetCellError(_cellContext.record.recordKey, columnName, "You cannot change the value of this field");
                                }
                            }
                        };

                        editorInstance.Unbind = function () {
                            if (cellContext.inGridMode === true) {
                                _cellContext = editorInstance._cellContext;
                                if (_cellContext != null) {
                                    ctx.jsGridObj.ClearAllErrorsOnCell(_cellContext.record.recordKey, columnName);
                                }

                            }
                        };

                        //editorInstance.OnValueChanged = function (newValue) {

                        //    _cellContext = editorInstance.GetCellContext();

                        //    //ctx.jsGridObj.ClearAllErrorsOnRow(cellContext.record.recordKey)
                        //    ctx.jsGridObj.ClearAllErrorsOnCell(_cellContext.record.recordKey, columnName);

                        //    if ((isUserProjectOwner == true) && (newValue != _cellContext.originalValue.localized)) {
                        //        //ctx.jsGridObj.SetRowError(_cellContext.record.recordKey, "ERROR");
                        //        ctx.jsGridObj.SetCellError(_cellContext.record.recordKey, columnName, "You cannot change the value of this field");
                        //    }

                        //    var valueToSet = (newValue.localized == null || newValue.localized == SP.JsGrid.EmptyValue ? '' : newValue.localized);

                        //    var inputElement = editorInstance.GetInputElement();

                        //    inputElement.value = valueToSet;
                        //};

                        //editorInstance.BindToCell = function (cellContext) {
                        //    _cellContext = cellContext;

                        //    //try {
                        //    //    if (_cellContext == null) {
                        //    //        _cellContext = editorInstance.GetCellContext();
                        //    //    }
                        //    //    if (currentUserIsOperationManager == true) {
                        //    //        _cellContext.field.csrInfo.AllowGridEditing = "TRUE";
                        //    //    }
                        //    //    else if ((isUserProjectOwner == true) || (isUserTaskAsignee == true)) {
                        //    //        _cellContext.field.csrInfo.AllowGridEditing = "FALSE";
                        //    //    }
                        //    //} catch (err) { }

                        //    ctx.jsGridObj.SetRowError(_cellContext.record.recordKey, "ERROR");
                            
                        //};

                        //editorInstance.SetSize = function (width, height) {

                        //    //do standard stuff
                        //    var inputElement = editorInstance.GetInputElement();

                        //    editorInstance.SetProperties(inputElement, ["style", "width"], width + 'px');
                        //    editorInstance.SetProperties(inputElement, ["style", "height"], height + 'px');
                        //};

                        //editorInstance.SetProperties = function (obj, props, val) {
                        //    for (var i = 0; i < props.length - 1; i++) {
                        //        obj = obj[props[i]];
                        //    }
                        //    obj[props[props.length - 1]] = val;
                        //};

                        //editorInstance.BindToCell = function (cellContext) {
                        //    _cellContext = cellContext;

                        //    try {
                        //        if (_cellContext == null) {
                        //            _cellContext = editorInstance.GetCellContext();
                        //        }
                        //        if (currentUserIsOperationManager == true) {
                        //            _cellContext.field.csrInfo.AllowGridEditing = "TRUE";
                        //        }
                        //        else if ((isUserProjectOwner == true) || (isUserTaskAsignee == true)) {
                        //            _cellContext.field.csrInfo.AllowGridEditing = "FALSE";
                        //        }
                        //    } catch (err) { }

                        //    var inputElement = editorInstance.GetInputElement();
                        //    editorInstance.SetSize(_cellContext.cellWidth - 10, _cellContext.cellHeight - 6);
                        //    if (_cellContext.field.textDirection != SP.JsGrid.TextDirection.Default) {
                        //        editorInstance.SetProperties(inputElement, ["style", "direction"], _cellContext.field.textDirection == SP.JsGrid.TextDirection.RightToLeft ? 'rtl' : 'ltr');
                        //    }
                        //    inputElement.value = '';
                        //};

                        //editorInstance.OnBeginEdit = function (eventInfo) {
                        //    editorInstance._bUsingGridTextInputElement = editorInstance._tbGrid != null && eventInfo.type == "keypress";
                        //    var tb = editorInstance.GetInputElement();

                        //    if (_cellContext == null) {
                        //        _cellContext = editorInstance.GetCellContext();
                        //    }

                        //    _cellContext.Show(tb);
                        //    editorInstance._bInEdit = true;
                        //    //editorInstance.SetupNewHandlers(tb, true, editorInstance._bUsingGridTextInputElement);
                        //    ctx.jsGridObj.NotifyHide();
                        //    if (eventInfo.type == 'mousedown' && !editorInstance._bUsingGridTextInputElement) {
                        //        setTimeout(function () {
                        //            editorInstance.Focus(eventInfo);
                        //        }, 0);
                        //    }
                        //    else {
                        //        editorInstance.Focus(eventInfo);
                        //    }
                        //};

                        //editorInstance.SetupNewHandlers = function SetupNewHandlers(tb, bAttach, _bUsingGridTextInputElement) {
                        //    //var tb = editorInstance.GetCellContext();
                        //    //OnKeyUp = new function () {
                        //    //    this.SetValue((this.GetInputElement).value);
                        //    //}

                        //    //OnMouseDown = new function (eventInfo) { eventInfo.stopPropagation(); }

                        //    if (bAttach) {
                        //        $addHandler(tb, 'focus', ctx.OnActivateActor);
                        //        $addHandler(tb, 'blur', ctx.OnDeactivateActor);
                        //        if (!_bUsingGridTextInputElement) {
                        //            $addHandler(tb, 'keydown', ctx.OnKeyDown);
                        //        }
                        //        //$addHandler(tb, 'keyup', OnKeyUp);
                        //        //$addHandler(tb, 'mousedown', OnMouseDown);
                        //    }
                        //    else {
                        //        $removeHandler(tb, 'focus', ctx.OnActivateActor);
                        //        $removeHandler(tb, 'blur', ctx.OnDeactivateActor);
                        //        if (!_bUsingGridTextInputElement) {
                        //            $removeHandler(tb, 'keydown', ctx.OnKeyDown);
                        //        }
                        //        //$removeHandler(tb, 'keyup', OnKeyUp);
                        //        //$removeHandler(tb, 'mousedown', OnMouseDown);
                        //    }
                        //}

                        //editorInstance.SetValue = function (value) {

                        //}

                        return editorInstance;
                    }, []);

            });
        }, "spgantt.js");
    //}
}

function ReadOnlyForAllEditBoxViewTemplateInstance(ctx, columnName, quickEditId) {

    cellContext = ctx;

    
        SP.SOD.executeOrDelayUntilScriptLoaded(function () {
            SP.GanttControl.WaitForGanttCreation(function (ganttInstance) {

                ChangeColumnGetEditControlName(ganttInstance, columnName, quickEditId);

                SP.JsGrid.PropertyType.Utils.RegisterEditControl(quickEditId, function (ctx) {
                    var editorInstance = new SP.JsGrid.EditControl.EditBoxEditControl(ctx, null);

                    editorInstance.SetValue = function (value) {
                        if (cellContext.inGridMode === true) {
                            _cellContext = editorInstance.GetCellContext();
                            ctx.jsGridObj.SetCellError(_cellContext.record.recordKey, columnName, "You cannot change the value of this field");
                        }
                    };

                    editorInstance.Unbind = function () {
                        if (cellContext.inGridMode === true) {
                            _cellContext = editorInstance.GetCellContext();
                            if (_cellContext != null) {
                                ctx.jsGridObj.ClearAllErrorsOnCell(_cellContext.record.recordKey, columnName);
                            }
                        }
                    };

                    //editorInstance.SetValue = function (value) {

                    //    _cellContext = editorInstance.GetCellContext();

                    //    ctx.jsGridObj.ClearAllErrorsOnRow(cellContext.record.recordKey)
                    //    //ctx.jsGridObj.ClearAllErrorsOnCell(_cellContext.record.recordKey, columnName);

                    //    if ((isUserProjectOwner == true) && (value != _cellContext.originalValue.localized)) {
                    //        //ctx.jsGridObj.SetRowError(_cellContext.record.recordKey, "ERROR");
                    //        ctx.jsGridObj.SetCellError(_cellContext.record.recordKey, columnName, "You cannot change the value of this field");
                    //    }
                    //    else {
                    //        _cellContext.SetCurrentValue({
                    //            localized: value
                    //        });
                    //    }
                    //};

                    //editorInstance.SetSize = function (width, height) {

                    //    try {
                    //        if (_cellContext == null) {
                    //            _cellContext = editorInstance.GetCellContext();
                    //        }
                    //            _cellContext.field.csrInfo.AllowGridEditing = "FALSE";
                    //    } catch (err) { }

                    //    //do standard stuff
                    //    var inputElement = editorInstance.GetInputElement();

                    //    editorInstance.SetProperties(inputElement, ["style", "width"], width + 'px');
                    //    editorInstance.SetProperties(inputElement, ["style", "height"], height + 'px');
                    //};

                    //editorInstance.SetProperties = function (obj, props, val) {
                    //    for (var i = 0; i < props.length - 1; i++) {
                    //        obj = obj[props[i]];
                    //    }
                    //    obj[props[props.length - 1]] = val;
                    //};

                    //editorInstance.BindToCell = function (cellContext) {
                    //    _cellContext = cellContext;

                    //    try {
                    //        if (_cellContext == null) {
                    //            _cellContext = editorInstance.GetCellContext();
                    //        }
                    //            _cellContext.field.csrInfo.AllowGridEditing = "FALSE";
                    //    } catch (err) { }
                    //};

                    return editorInstance;
                }, []);

            });
        }, "spgantt.js");
}

function ReadOnlyDateViewTemplateInstance(ctx, columnName, quickEditId) {
    
    cellContext = ctx;

        SP.SOD.executeOrDelayUntilScriptLoaded(function () {
            SP.GanttControl.WaitForGanttCreation(function (ganttInstance) {

                ChangeColumnGetEditControlName(ganttInstance, columnName, quickEditId);

                ChangeColumnGetWidgetControlNames(ganttInstance, columnName, "Q");

                SP.JsGrid.PropertyType.Utils.RegisterEditControl(quickEditId, function (ctx) {
                    var editorInstance = new SP.JsGrid.EditControl.EditBoxEditControl(ctx, null);

                    //editorInstance.BindToCell = function (cellContext) {
                    //    this._cellContext = cellContext;
                    //    editorInstance = cellContext;
                    //    _cellContext = cellContext;

                    //    try {
                    //        if (IsUserOperationManager == true) {
                    //            var inputElement = editorInstance.GetInputElement();
                    //            editorInstance.SetSize(this._cellContext.cellWidth - 10, this._cellContext.cellHeight - 6);
                    //            if (this._cellContext.field.textDirection != SP.JsGrid.TextDirection.Default) {
                    //                editorInstance.SetProperties(inputElement, ["style", "direction"], this._cellContext.field.textDirection == SP.JsGrid.TextDirection.RightToLeft ? 'rtl' : 'ltr');
                    //            }
                    //            inputElement.value = '';
                    //        }
                    //        else {
                    //            ctx.jsGridObj.SetCellError(this._cellContext.record.recordKey, columnName, "You cannot change the value of this field");
                    //        }
                    //    } catch (err) { }

                    //    editorInstance._bInEdit = true;
                    //};

                    editorInstance.OnValueChanged = function (newValue) {
                        if (cellContext.inGridMode === true) {
                            _cellContext = editorInstance.GetCellContext();
                            ctx.jsGridObj.ClearAllErrorsOnCell(_cellContext.record.recordKey, columnName);
                            if (IsUserOperationManager == true) {
                                var valueToSet = (newValue.localized == null || newValue.localized == SP.JsGrid.EmptyValue ? '' : newValue.localized);
                                var inputElement = editorInstance.GetInputElement();
                                inputElement.value = valueToSet;
                            } else if (newValue.localized != _cellContext.originalValue.localized) {
                                _cellContext.SetCurrentValue(_cellContext.originalValue);
                            }
                        }
                    };


                    //editorInstance.OnCellMove = function () {
                    //    _cellContext = editorInstance.GetCellContext();
                    //    editorInstance.SetSize(_cellContext.cellWidth - 10, _cellContext.cellHeight - 6);
                    //    if (editorInstance._bInEdit) {
                    //        _cellContext.Show(editorInstance.GetInputElement());
                    //    }
                    //};

                    editorInstance.Unbind = function () {
                        if (cellContext.inGridMode === true) {
                            _cellContext = editorInstance.GetCellContext();
                            if (_cellContext != null) {
                                ctx.jsGridObj.ClearAllErrorsOnCell(_cellContext.record.recordKey, columnName);
                            }
                        }
                    };

                    editorInstance.GetOriginalValue = function () {
                        if (cellContext.inGridMode === true) {
                            _cellContext = editorInstance.GetCellContext();
                        
                            if (IsUserOperationManager == false) {
                                editorInstance.SetValue = function (value) {
                                    ctx.jsGridObj.SetCellError(this.GetCellContext().record.recordKey, columnName, "You cannot change the value of this field");
                                };
                            }

                            return _cellContext.originalValue.localized;  
                        }
                    };

                    //editorInstance.GetFirstValue = function () {
                    //    return editorInstance._firstValue;
                    //};

                    //editorInstance.SaveFirstValue = function (value) {
                    //    if (editorInstance.GetFirstValue() == null) {
                    //        this._firstValue = value;
                    //    }
                    //};

                    //editorInstance.SaveFirstValue(null);

                    //editorInstance.BindToCell = function (cellContext) {

                    //    _cellContext = cellContext;

                    //    try {
                    //        //if (_cellContext == null) {
                    //        //    _cellContext = editorInstance.GetCellContext();
                    //        //}
                    //        if (currentUserIsOperationManager == true) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "TRUE";
                    //        }
                    //        else if ((isUserProjectOwner == true) || (isUserTaskAsignee == true)) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "FALSE";
                    //        }
                    //    } catch (err) { }

                    //    var inputElement = editorInstance.GetInputElement();
                    //    editorInstance.SetSize(_cellContext.cellWidth - 10, _cellContext.cellHeight - 6);
                    //    if (_cellContext.field.textDirection != SP.JsGrid.TextDirection.Default) {
                    //        editorInstance.SetProperties(inputElement, ["style", "direction"], _cellContext.field.textDirection == SP.JsGrid.TextDirection.RightToLeft ? 'rtl' : 'ltr');
                    //    }
                    //    inputElement.value = '';
                    //};

                    //editorInstance.OnValueChanged = function (newValue) {
                    //    try {
                    //        //if (_cellContext == null) {
                    //        //    _cellContext = editorInstance.GetCellContext();
                    //        //}
                    //        if (currentUserIsOperationManager == true) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "TRUE";
                    //        }
                    //        else if ((isUserProjectOwner == true) || (isUserTaskAsignee == true)) {
                    //            _cellContext.field.csrInfo.AllowGridEditing = "FALSE";
                    //        }
                    //    } catch (err) { }

                    //    if (currentUserIsOperationManager == true) {
                    //        var inputElement = editorInstance.GetInputElement();
                    //        inputElement.value = (newValue.localized == null || newValue.localized == SP.JsGrid.EmptyValue ? '' : newValue.localized);
                    //    }
                    //};

                    return editorInstance;
                }, []);

                SP.JsGrid.PropertyType.Utils.RegisterWidgetControl("Q", function (ctx) {
                    var editorInstance = new SP.JsGrid.WidgetControl.DateWidget(ctx);

                    //editorInstance.BindToCell = function (cellContext) {
                    //    this._cellContext = cellContext;

                    //    try {
                    //        if (IsUserOperationManager == true) {
                    //            var inputElement = editorInstance.GetInputElement();
                    //            editorInstance.SetSize(this._cellContext.cellWidth - 10, this._cellContext.cellHeight - 6);
                    //            if (this._cellContext.field.textDirection != SP.JsGrid.TextDirection.Default) {
                    //                editorInstance.SetProperties(inputElement, ["style", "direction"], this._cellContext.field.textDirection == SP.JsGrid.TextDirection.RightToLeft ? 'rtl' : 'ltr');
                    //            }
                    //            inputElement.value = '';
                    //        }
                    //        else {

                    //        }
                    //    } catch (err) { }

                    //    editorInstance._bInEdit = true;
                    //};

                    //editorInstance.Expand = function () {

                    //};

                    //editorInstance.BindToCell = function (cellContext) {
                    //    editorInstance._cellContext = cellContext;
                    //    this._cellContext = cellContext;
                    //    _cellContext = cellContext;
                    //    if (IsUserOperationManager == true) {
                    //        editorInstance._curValue = editorInstance._cellContext.originalValue.localized == SP.JsGrid.EmptyValue ? '' : editorInstance._cellContext.originalValue.localized;
                    //    }
                    //};

                    //editorInstance.OnValueChanged = function (newValue) {
                    //    if (IsUserOperationManager == true) {
                    //        editorInstance._curValue = newValue.localized;
                    //    }
                    //    else {
                    //        cellContext = editorInstance.GetCellContext();
                    //        ctx.jsGridObj.ClearAllErrorsOnCell(_cellContext.record.recordKey, columnName);
                    //    }
                    //};

                    return editorInstance;
                });

            });
        }, "spgantt.js");
}

function ReadOnlyMultilineRichTextViewTemplateInstance(ctx, columnName, quickEditId) {

    cellContext = ctx;

    if (ctx.inGridMode === true) {
        SP.SOD.executeOrDelayUntilScriptLoaded(function () {
            SP.GanttControl.WaitForGanttCreation(function (ganttInstance) {

                ChangeColumnGetEditControlName(ganttInstance, columnName, quickEditId);

                SP.JsGrid.PropertyType.Utils.RegisterEditControl(quickEditId, function (ctx) {
                    var editorInstance = new SPG.EnhancedRichTextEditControl(ctx);

                    //editorInstance.SetValue = function (value) {
                    //    _cellContext = editorInstance.GetCellContext();
                    //    if (((isUserProjectOwner == true) || (isUserTaskAsignee == true)) && (value != _cellContext.originalValue.localized)) {
                    //        ctx.jsGridObj.SetCellError(_cellContext.record.recordKey, columnName, "You cannot change the value of this field");
                    //    }
                    //    else {
                    //        _cellContext.SetCurrentValue({ localized: value });
                    //    }
                    //};

                    //editorInstance.Unbind = function () {
                    //    ctx.jsGridObj.ClearAllErrorsOnCell(_cellContext.record.recordKey, columnName);
                    //};
                    var rteMinHeight = 84;
                    var outerSpan = document.createElement("span");
                    var id = quickEditId;
                    outerSpan.id = id;
                    outerSpan.className = "jsgrid-control-rte";
                    outerSpan.style.cssText = 'visibility:hidden;;top:-10000px;left:-10000px;';
                    outerSpan.tabIndex = -1;
                    var divRteStateField = document.createElement("div");

                    divRteStateField.className = "ms-rtestate-field ms-rtefield ms-shadow";
                    divRteStateField.style.minWidth = "0px";
                    divRteStateField.id = id + "_topDiv";
                    var divRteLabel = document.createElement("div");

                    divRteLabel.id = id + "_label";
                    divRteLabel.style.display = "none";
                    var divRteStateWriteId = id = "_rte";
                    var divRteStateWrite = null;
                    var divRteExtra = document.createElement("div");

                    divRteExtra.style.clear = "both";
                    divRteStateField.appendChild(divRteLabel);
                    divRteStateField.appendChild(divRteExtra);
                    outerSpan.appendChild(divRteStateField);
                    var spanRteContainer = document.createElement("span");
                    var saveInputId = id + "_saveInput";
                    var saveInput = document.createElement("input");

                    saveInput.id = saveInputId;
                    saveInput.type = "hidden";
                    var focusInput = document.createElement("input");

                    focusInput.id = "ms-rtefocuselementid";
                    focusInput.name = "ms-rtefocuselementid";
                    focusInput.type = "hidden";
                    spanRteContainer.appendChild(saveInput);
                    spanRteContainer.appendChild(focusInput);
                    outerSpan.appendChild(spanRteContainer);
                    ctx.parentNode.appendChild(outerSpan);

                    editorInstance.BindToCell = function (contextParam) {
                        ULSc2E:
                        ;
                        cellContext = contextParam;
                        this.cellContext = contextParam;
                        editorInstance.cellContext = contextParam;
                        editorInstance.RecreateDivRteStateWriteNew();
                        editorInstance.SizeToCellOrDefaultNew();
                        if (editorInstance.cellContext.field.textDirection != SP.JsGrid.TextDirection.Default) {
                            divRteStateWrite.style.direction = editorInstance.cellContext.field.textDirection == SP.JsGrid.TextDirection.RightToLeft ? 'rtl' : 'ltr';
                        }
                        var currentValue = editorInstance.GetCSRFieldValueNew();

                        saveInput.value = currentValue == null || currentValue == SP.JsGrid.EmptyValue ? '' : currentValue;
                        divRteStateWrite.innerHTML = saveInput.value;
                    };

                    editorInstance.RecreateDivRteStateWriteNew = function () {
                        ULSc2E:
                        ;
                        if (divRteStateWrite != null) {
                            divRteStateField.removeChild(divRteStateWrite);
                            divRteStateWrite = null;
                        }
                        divRteStateWrite = document.createElement("div");
                        divRteStateWrite.className = "ms-rtestate-write ms-rteflags-0";
                        divRteStateWrite.id = divRteStateWriteId;
                        divRteStateWrite.style.minHeight = rteMinHeight + "px";
                        divRteStateWrite.setAttribute("aria-labelledby", id + "_label");
                        divRteStateWrite.setAttribute("contentEditable", "true");
                        divRteStateWrite.style.direction = ctx.RTL.ltr;
                        divRteStateWrite.style.paddingLeft = "3px";
                        divRteStateWrite.style.paddingRight = "3px";
                        divRteStateField.appendChild(divRteStateWrite);
                        if (divRteStateWrite != null) {
                            divRteStateWrite.InputFieldId = saveInputId;
                        }
                        if (saveInput != null && saveInput.value == '') {
                            saveInput.value = divRteStateWrite.innerHTML;
                        }
                        //ctx.RTE.Canvas.fixRegion(divRteStateWriteId, false);
                    }

                    editorInstance.SizeToCellOrDefaultNew = function () {
                        ULSc2E:
                        ;
                        var width = editorInstance.cellContext.cellWidth - 6 + 'px';
                        var height = editorInstance.cellContext.cellHeight - 6 + 'px';

                        outerSpan.style.minWidth = width;
                        outerSpan.style.minHeight = height;
                        divRteStateWrite.style.minWidth = width;
                        divRteStateWrite.style.minHeight = height;
                    }

                    editorInstance.GetCSRFieldValueNew = function () {
                        ULSc2E:
                        ;
                        var field = editorInstance.cellContext.field.key;

                        if (editorInstance.cellContext.record.fieldRawDataMap.csrInfo != null) {
                            return editorInstance.cellContext.record.fieldRawDataMap.csrInfo[field];
                        }
                        return null;
                    }

                    //editorInstance.Unbind = function () {
                    //    ULSc2E:
                    //    ;
                    //    saveInput.value = "";
                    //    divRteStateWrite.innerHTML = "";
                    //};

                    return editorInstance;
                }, []);

            });
        }, "spgantt.js");
    }
}

function ChangeColumnGetEditControlName(ganttInstance, columnName, quickEditId) {
    var column = null;
    var columns = ganttInstance.get_Columns();

    for (var i = 0; i < columns.length; i++) {
        if (columns[i].columnKey == columnName) {
            column = columns[i];

                column.fnGetEditControlName = function (record, fieldKey) {
                    return quickEditId;
                };

            break;
        }
    }
}

function ChangeColumnGetWidgetControlNames(ganttInstance, columnName, quickEditId) {
    var column = null;
    var columns = ganttInstance.get_Columns();

    for (var i = 0; i < columns.length; i++) {
        if (columns[i].columnKey == columnName) {
            column = columns[i];

            column.fnGetWidgetControlNames = function (record, fieldKey) {
                return quickEditId;
            };

            break;
        }
    }
}

function RenderField(ctx, columnName) {
    var field = ctx.CurrentFieldSchema;
    var item = ctx.CurrentItem;
    var list = ctx.ListSchema;

    var renderedHtml = "";

    switch (field.Type) {

        case "DateTime":
            SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                DateTimeFieldRenderer(columnName);
            }, "clienttemplates.js");

            SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                renderedHtml = DateTimeFieldRendererRenderField(ctx, field, item, list);
            }, "clienttemplates.js");
            break;

        case "User":
        case "UserMulti":
            SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                UserFieldRenderer(columnName);
            }, "clienttemplates.js");

            SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                renderedHtml = UserFieldRendererRenderField(ctx, field, item, list);
            }, "clienttemplates.js");
            break;

        case "Lookup":
        case "LookupMulti":
            SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                UserFieldRenderer(columnName);
            }, "clienttemplates.js");

            SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                renderedHtml = UserFieldRendererRenderField(ctx, field, item, list);
            }, "clienttemplates.js");
            break;

        case "Computed":
            SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                ComputedFieldRenderer(columnName);
            }, "clienttemplates.js");

            SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                renderedHtml = ComputedFieldRenderField(ctx, field, item, list);
            }, "clienttemplates.js");
            break;

        case "Note":
            SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                NoteFieldRenderer(columnName);
            }, "clienttemplates.js");

            SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                renderedHtml = NoteFieldRendererRenderField(ctx, field, item, list);
            }, "clienttemplates.js");
            break;

        default:
            renderedHtml = ctx.CurrentItem[columnName];
    }

    return renderedHtml;
}

Best Regards,

Dennis

---

TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact [e-mail].

Answer 2

Make it Required Field

---

http://www.abdulazizfarooqi.wordpress.com Abdul Aziz Farooqi [BizTalk & SharePoint Consultant] MCPD Web & MCPD SharePoint 2010