Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
80
igGrid validation on multiple columns
posted

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!

  • 17590
    Offline posted

    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.