Jqgrid - Validation on selecting dropdown

Question

i have this column with dropdown, currently when i select any value from the dropdown it it gets saved, i would like to add a validation while selecting a value from dropdown before saving, for example,

{name:'color_name',
    cellattr: function (rowid, cellValue) {
    if ($.inArray(cellValue, hilightcolorcell) < 0) {
    return " class='redcells'";
    }
    },editable:true,edittype:"select",editoptions:
    {value:"PURPLE:PURPLE;PINK:PINK;GREEN:GREEN"}}

if the selected value was PINK, i wanted to have a validation prompt with Save and Cancel button something like this, Selected Value is : PINK, SAVE CANCEL

this is demo link https://jsfiddle.net/kwu7v3fc/3/

please help.

Answer 1

There are many ways to implement your requirement. The most native would seems to me to ask the confirmation from the user directly on change of the select option and before real saving it. One can add "change" event handler, which do all you need. The corresponding implementation will look like on the example below

editoptions: {
    value: "PURPLE:PURPLE;PINK:PINK;GREEN:GREEN",
    dataEvents: [
        {
            type: "change",
            fn: function (e) {
                if ($(this).val() === "PINK") {
                    if (!confirm("Are you sure you want PINK?")) {
                        // reset the value to the previous one
                        var savedRow = $("#rowed5").jqGrid("getGridParam", "savedRow");
                        $(this).val(savedRow[0].v);
                    }
                }
            }
        }
    ]
}

See the modified demo https://jsfiddle.net/OlegKi/kwu7v3fc/5/