Passive Validation

[lray]

Is there a way to invoke cell validation passively in place of having to press the 'enter' key? We are running ProfoundUI on top of our AS400 iSeries and pressing the 'enter' key invokes the AS400 submit. This causes the underlying AS400 screen to be re-written. I can trap the 'enter' key and prevent the AS400 submit, but that also impacts the cell validations. Any help you can provide is appreciated.

[paramvir]

Solution 1: ( trap enter key )
 
Remove saveKey : $.ui.keyCode.ENTER from editModel

Trap/ capture the 'enter' key at document level, find out whether enter key was pressed in the grid editor by testing $(evt.target).closest(".pq-editor-focus") and invoke $grid.pqGrid('saveEditCell') and finally prevent the AS400 submit.

Solution 2: (passive validations)

Cell validations are triggered by call to function $grid.pqGrid("isValid", { dataIndx: ui.dataIndx, value: ui.newVal }); Remove the call from current location in cellBeforeSave event.
Instead listen to cellEditKeyDown event, use setTimeout to set a timer and do the validations when user hasn't typed in the cell for a certain interval of time.


Please let know which solution works for you.

[lray]

Thank you for the suggested solutions for my problem. In trying the first solution, I'm at the point where I can see that the 'saveEditCell' function is being invoked but nothing is happening. I then tried to invoke the 'isValid' method using the cell index and had a modicum of success; although I'm seeing the wrong validation message and when I attempt to correct the error I still get the error message.  I am going to try second solution.

Here is the colModel variable I am using with included validations. Would you be able to tell me if this is valid?  Thank you again.

    newObj.colModel = [
      { title: 'Category', width: 390, dataIndx: 'category', resizable: false, editable:false, },
      { title: 'Job Weight', width: 90, dataIndx: 'jobWt', resizable: false, dataType: 'float', align:'center',
        validations: [
          { type: 'minLen', value: 1, msg: 'Required'},
          { type: 'gte', value: 1, msg: 'key value between 1.00 and 99.99'},                   
          { type: 'lt', value: 100, msg: 'key value between 1.00 - 99.99'}                             
        ] },
      { title: 'Rating', width: 80, dataIndx: 'rating', resizable: false, dataType: 'float', align:'center',
        validations: [
          { type: 'minLen', value: 1, msg: 'Required'},
          { type: 'gte', value: 1, msg: 'key value between 1.00 and 4.00'},                   
          { type: 'lte', value: 4, msg: 'key value bewteen 1.00 and 4.00'}                             
        ] },

      { title: 'Points', width: 90, dataIndx: 'points', resizable: false, dataType: 'integer', editable:false, align:'center' }
    ];

[paramvir]

Your colModel has trailing comma [,] in first column which is problematic in IE lower versions, otherwise it seems fine.

I tried to create a test case similar to yours' by including PQGrid in a form and that arose few doubts.

I've few questions for you and I hope I would be able to provide you a simple workable solution based on that.

Does ProfoundUI listen to enter key during capture phase or bubble phase?

Does it listen to keydown or keypress event?

How do you trap the enter key to prevent AS400 submit?

[paramvir]

You may try to include evt.stopPropagation() in your cellbeforesave event which would prevent enter key from bubbling up the DOM. It would work along with saveKey: $.ui.keyCode.ENTER in editModel

Code: [Select]


grid1.on("pqgridcellbeforesave", function (evt, ui) {
    var isValid = grid1.pqGrid("isValid", { dataIndx: ui.dataIndx, value: ui.newVal }).valid;
    if (!isValid) {
        grid1.find(".pq-editor-focus").css({ "border-color": "red" });
        return false;
    }
    evt.stopPropagation();           
});



evt.stopPropagation() can also be added in cellEditKeyDown event.