igGrid validation

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<table id="gridUpdating"></table>

JavaScript

$(function () {
    var ds = [
        { ID: 1, Quantity: 5, Limit: 10 },
        { ID: 2, Quantity: 8, Limit: 8 },
        { ID: 3, Quantity: 0, Limit: 5 }
    ];

    $("#gridUpdating").igGrid({
        width: "100%",
        primaryKey: "ID",
        dataSource: ds,
        columns: [
            { headerText: "ID", key: "ID", dataType: "number" },
            { headerText: "Quantity", key: "Quantity", dataType: "string", },
            { headerText: "Limit", key: "Limit", dataType: "string", },
        ],
        features: [{
            name: "Updating",
            validation: true,
            enableAddRow: true,
            enableDeleteRow: true,
            editMode: "row",
            columnSettings: [
                {
                    columnKey: "ID",
                    editorType: "numeric",
                    editorOptions: { disabled: true }
                }, {
                    columnKey: "Quantity",
                    editorType: "text",
                    required: true,
                    validation: true,
                    editorOptions: {
                        validatorOptions: {
                            required: true,
                            onblur: true,
                            onchange: true,
                            onsubmit: true,
                            valueRange: { min: 0, errorMessage: "Quantity ≥ 0" },
                            custom: {
                                method: function (value) {
                                    const setMsg = txt => {
                                        $(this.element).igValidator("option", "errorMessage", txt);
                                        return false;
                                    };

                                    var grid = $("#gridUpdating").data("igGrid");
                                    var data = grid.dataSource.dataView();
                                    const rowElem =...