jQuery Grid Plugin - jqGridForum

Topic RSS

how to use custom_func in editrules for server side sync validation

09/07/2011
22:37

kobruleht

Member

Members

Forum Posts: 144

Member Since:
05/05/2011

Offline

I'm looking for a way to perform field validation in server side in inline and form edit and update
column with result so that edit mode is not terminated.

I tried in colModel:

editrules = { custom = true,
custom_func = function (value, colname) {return [false, 'test']}
}

it looks like that custom_func is called only if enter is pressed to save form.
How to call custom_func immediately if field is changed and loses focus or if field has changed and enter is pressed
without losing focus or is there better way to validate changed column immediately if it loses focus ?

10/07/2011
13:32

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

It you just try to save the modification the server should valudate the data before ot save in in the database. If the validateion failed the server should answer with the error HTTP code. In the case you can impelemnt the reloading of the data inside of the errorfunc of the editRow or the event handler errorTextFormat of the editGridRow. If the error message which you display is clear enough the user can reload the grid herself.

So im my opinion the server side validation of the data is the part of saving the data. If the server validation are implemented is the CHECK CONSTRAINT of the database or inside of the code of your STORED PROCEDUREs the SQL exception will be thorwn and you will have almost the same validation errors like I described before.

Best regards
Oleg

10/07/2011
21:16

kobruleht

Member

Members

Forum Posts: 144

Member Since:
05/05/2011

Offline

Oleg,

thank you. Server side validation in my application works exactly as you described. However I'm trying to implement a bit different usage case like this:

If user enters product code, server should validate this code. If code is ok, server returns product name, customer discount, price, quantity in stock and ordered quantity.

From your reply I understand that you recommend to do all this after row is saved and overwrite row data after save. There are issues with this:

1. Users can enter foreign key values or foreigh key fields, e.q

If product code is entered, server should return product name and other data. If product name is entered, server should show and update product code. Issue: On save save server does not know which foregin key column (id or name) was filled by user and which column need to be calculated.

For product there can entered product code, product id, barcode, product name, serial number. If one is entered, server shoudl update other columns in order automatically and preferably immediately.

2. Pertial save is inconvenient: to get name/product id, quantity on stocks, price, ordered quantity,row should partially saved. After that row should re-opened quantity to order should entered or row shoudl be edited or deleted.

3. Row data needs overwritten also if save was OK.

I don't know how to fix those using your recommendation. So I'm looking for a way to return those data after product id or name or other foreign key is entered.

I tried

colModel: [{"label":"ProductCode","name":"ProductCode","editoptions":{
"dataEvents":[
{"type":"focus","fn":function(e) { ischanged=false}},
{"type":"change","fn":function(e) {ischanged=true}},
{"type":"keydown","fn":function(e) {ischanged=true }},
{"type":"blur","fn":function(e) { if(ischanged) validate(e)} }
]},

To implement validate I found code from your great answer in Stack Overflow (I upvoted answer):

function validate(e) {

var elem = e.target;
ischanged = false;
$.ajax( '/validate',{
        data: ({ value: $(elem).val() }), // todo: how to pass all row data
        async: false,
        success: function (data, textStatus, jqXHR) {

    // todo: how to overwrite all rows with server data
    if ($(e.target).is('.FormElement')) {
           // form editing
           var form = $(e.target).closest('form.FormGrid');
           $('#ProductName.FormElement',form[0]).val(data.value);
          } else {
            // inline editing
            var row = $(e.target).closest('tr.jqgrow');
            var rowId = row.attr('id');
            $('#'+rowId+'_ProductName').val(data.value);
            }
   }}

Is this best way to solve the issue? However, this passes and overwrites only single column. How to pass whole row to server and overwrite whole row with values returned form server? For overwriting all rows with data returned from server I think I can return server array which contains column name and column value. In this case this code can modified to write changed data to all columns. IS this best way? For me difficult part is to pass all columns to server. How to implement this ? Has jqGrid some function or how to loop over all columns and send those values to server ?

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 994

Currently Online:
17 Guest(s)

Currently Browsing this Page:
1 Guest(s)