Question

I have a jqGrid (pared-down example below) where I need rather complicated validation to be done as new rows are being selected, unselected, and (later) when the grid is saved. The built-in validation techniques weren’t working well for my purposes (for legacy purposes, I need fairly fine-grained control over the behavior). I’ve got almost all of the problems fixed except for the ‘Enter’ key.

This is the “inline editing” demo, except notice the custom “onSelectRow” function…

<script>
jQuery(document).ready(function(){ 
  var lastsel
  jQuery("#rowed5").jqGrid({        
    datatype: "local",
    colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
    colModel:[
      {name:'id',index:'id', width:90, sorttype:"int", editable: true},
      {name:'name',index:'name', width:150,editable: true },
      {name:'stock',index:'stock', width:60, editable: true},
      {name:'ship',index:'ship', width:90, editable: true},                       
      {name:'note',index:'note', width:200, sortable:false,editable: true}                      
              ],
    onSelectRow: function(id){
            if (id && id !== lastsel) {
                if (lastsel != undefined) {
                    jQuery("#rowed5").jqGrid('saveRow', lastsel);
                    if ( ! myValidate(lastsel) ) {
                        jQuery("#rowed5").jqGrid('editRow', lastsel, true);
                        return;
                    }
                }
                jQuery("#rowed5").jqGrid('editRow', id, true);
                lastsel = id;
            }
    },
    editurl: "clientArray",
    caption: "Sample"
  });
  var mydata2 = [
    {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
    {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
    {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
    ];
  for(var i=0;i<mydata2.length;i++)
    jQuery("#rowed5").addRowData(mydata2[i].id,mydata2[i]);
});

function myValidate(id) {
    var t = jQuery("#rowed5").jqGrid("getCell", id, 'note');
    if ( t.length > 5 ) {
        jQuery("#rowed5")
            .jqGrid('resetSelection').jqGrid('setSelection', id, false);
        alert('note is too long, max 5 char');
        return false;
    }
    return true;
}
</script>
<table id="rowed5"></table>

If you change row selections within the grid by using the mouse the field “notes” is validated. However, if you press the enter key to accept the row values… I can’t figure out where to catch that event to insert my validation function. There doesn’t seem to be an “onSaveRow” event or “before saveRow” event to catch.

It seems I need to either catch the “enter” key myself, or inject my code into the saveRow method

Note: I’m aware of the beforeCellSave event when using cellEdit: true but I don’t want cell editing.

Edit: Now reflects Oleg’s demo with my code largely removed:

    $(document).ready(function () {
        'use strict';
        var mydata = [
                {id: "12345", name: "Desktop Computer", note: "note",      stock: "Yes", ship: "FedEx"},
                {id: "23456", name: "Laptop",           note: "Long text", stock: "Yes", ship: "InTime"},
                {id: "34567", name: "LCD Monitor",      note: "note3",     stock: "Yes", ship: "TNT"}
            ],
            $grid = $("#rowed5"),
            numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number', editable: true,
                searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }},
            lastsel;

        function myValidate1 (value, colname) {
            if (value.length > 5) {
                return [false, " is too long for the column '" +
                               colname + "'\nMax 5 char is permitted"];
            } else {
                return [true, ""];
            }
        }

        $grid.jqGrid({
            datatype: "local",
            data: mydata,
            height: 'auto',
            colNames: ['ID Number','Name', 'Stock', 'Ship via','Notes'],
            colModel: [
              {name: 'id',    index: 'id',    width: 90,  editable: true, sorttype: "int"},
              {name: 'name',  index: 'name',  width: 150, editable: true},
              {name: 'stock', index: 'stock', width: 60,  editable: true},
              {name: 'ship',  index: 'ship',  width: 90,  editable: true},
              {name: 'note',  index: 'note',  width: 200, editable: true, sortable: false,
                  editrules: {custom: true, custom_func: myValidate1}}
            ],
            onSelectRow: function (id) {
                var $this = $(this);
                if (id && id !== lastsel) {
                    if (lastsel != undefined) {
                        $this.jqGrid('saveRow', lastsel);
                    }
                    $this.jqGrid('editRow', id, true);
                    lastsel = id;
                }
            },
            editurl: "clientArray",
            caption: "Sample"
        });
    });

I removed the myValidate call and the return from the select handler. The problem that remains though is that the demo relies only on the editrules/custom_func validation and it no longer works. When I return [false, ...] from the handler the selection still succeeds and the new line is selected. I need to keep the old line selected if the validation fails.

Answer 1

First of all I would recommend you to use

editoptions: {maxlength: 5}

to restrict the max length of the input characters. For the validation you can use additionally editrules. If the example only the demo and you need some really complex validation you consider to use custom validation rule. For example

editrules: {custom: true, custom_func: myValidate1}

where

function myValidate1 (value, colname) {
    if (value.length > 5) {
        return [false, " is too long for the column '" +
                       colname + "'\nMax 5 char is permitted"];
    } else {
        return [true, ""];
    }
}

see the demo.