I am trying to do data entry validation against several columns in my igGrid. I found a posting showing how to do custom validation and I implemented it successfully against one column in my grid. However when I try to implement it against 2 columns, I am getting a javascript error "'undefined' is null or not an object" from the validation code in the posting, referencing "_editor.validator()". I started out validating just the LOBName field, which works fine, but when I added validation for "SubLOBName" I started getting the error.
The example I followed only showed validation for one column so I'm probably doing something wrong when I add the additional column.
Here is the code for my grid:
----------------
@(Html.Infragistics().Loader() .ScriptPath(Url.Content("~/Infragistics/js/")) .CssPath(Url.Content("~/Infragistics/css/")) .Render() ) @(Html.Infragistics().Grid(Model.lobTable.AsQueryable()) .ID("LOBGrid") .UpdateUrl(Url.Action("UpdateLOBGrid")) .AutoCommit(true) .AutoGenerateColumns(false) .PrimaryKey("BusinessProcID") .Width("100%") .Columns(column => { column.For(x => x.BusinessProcID).DataType("number").HeaderText("Business Process ID").Width("33%"); column.For(x => x.LOBName).DataType("string").HeaderText("LOB Name").Width("33%"); column.For(x => x.SubLOBName).DataType("string").HeaderText("Sub LOB Name").Width("33%"); }) .Features(feature => { feature.Paging().PageSize(15); feature.Resizing(); feature.Updating().EnableAddRow(true).EditMode(GridEditMode.Cell).EnableDeleteRow(false) .ColumnSettings(settings => { //settings.ColumnSetting().ColumnKey("BusinessProcID").EditorOptions(@"validatorOptions: {errorLabel: 'GridValidation', onChange: true}").Validation(true); //settings.ColumnSetting().ColumnKey("BusinessProcID").ReadOnly(true); settings.ColumnSetting().ColumnKey("LOBName").EditorOptions(@"validatorOptions: {errorLabel: 'GridValidation', onChange: true}").Validation(true); settings.ColumnSetting().ColumnKey("SubLOBName").EditorOptions(@"validatorOptions: {errorLabel: 'GridValidation', onChange: true}").Validation(true); }); feature.Filtering(); feature.Hiding().ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("BusinessProcID").AllowHiding(false); }); }) .DataBind() .Render() )
-----------------
Here is the validation BLOCKED SCRIPT
// validation scripts $.ig.loader(function () { customValidator("LOBGrid", "LOBName", validate); //alert("LOB"); customValidator("LOBGrid", "SubLOBName", validate); //alert("SUB"); }); function validate(e) { /* The e parameter has two fields: e.value - value of the field e.message - message to be shown when the value is invalid */ // MAKE YOUR CUSTOM VALIDATION HERE //alert(validateSpecialCharacters(e.value)); // call the javaScript validateSpecialCharacters function in the global.js file. var success = validateSpecialCharacters(e.value); if (success) { return true; } e.message = "The text entered, '" + e.value + "', contains invalid characters."; return success; } /* This is the custom validator function for igGridUpdating It takes parameters: gridId - the id of the grid fieldKey - key of the field to be verified validateFunction - function with signagure validateFunction(e) { e.value - value of the field e.message - message to be shown when the value is invalid } There is no need to configure the field in the updating columnSetting igGridUpdating is mandatory for this function to work */ function customValidator(gridId, fieldKey, validateFunction) { if (!$("#" + gridId).data("igGrid")) throw new Error("igGrid is not defined on element with id: " + gridId); if (!$("#" + gridId).data("igGridUpdating")) throw new Error("igGridUpdating is not defined"); var _attached = false; var columnSettings = $("#" + gridId).igGridUpdating("option", "columnSettings"); columnSettings.push({ columnKey: fieldKey, required: true, editorOptions: { validate: true } }); // add field setting to the updating columnSettings $("#" + gridId).igGridUpdating("option", "columnSettings", columnSettings); $(document).delegate("#" + gridId, "iggridupdatingeditcellstarted", function (evt, ui) { if (!_attached) { _attachCustomValidator(); _attached = true; } }); function _attachCustomValidator() { var editor = $("#LOBGrid").igGridUpdating("editorForKey", fieldKey); (function (editor) { var _editor = editor; var _validator = _editor.validator(); _validator._setOption("checkValue", function (evt, ui) { var value = _editor.value(); var args = { value: value, message: "" }; var isValid = validateFunction(args); if (!isValid) { ui.message = args.message; return false; } return true; }); })(editor.data("igEditor")); } }
------------
Thanks in advance!
Hello Paul,
Thank you for posting in our community!
I am still looking into your code and I will need some more time to investigate this further.
Meanwhile, providing me a working sample of your project where this issue is reproducible would be highly appreciated.
I will keep you posted on my progress and I will get back to you soon with more information or questions for you.