jqgrid: how send and receive row data keeping edit

问题:

jqGrid has employee name and employee id columns.

If employee name has changed, server validate method should called to validate name. Current row columns should be updated from data returned by this method.

If employee id has changed, server validate method should called to validate id. Current row columns should be updated from data returned by this method.

Preferably jqGrid should stay in edit mode so that user has possibility to continue changing, accept or reject changes.

How to implement this in inline and form editing? I'm thinking about following possibilites:

Possibility 1.

Use editrules with custom validator like

            editrules = new
            {
                custom = true,
                custom_func = function(value, colname) { ??? }
            },

Issues: How to get data from all columns, make sync or async call and update columns with this call results.

Possibility 2.

Require user to press Enter key to save row. Issues: how to find which column was changed and pass this column number to server. How to update current row data from server response.

Possibility 3.

using blur as described in Oleg great answer in jqgrid change cell value and stay in edit mode

Issues: blur does not fire if data is entered and enter is pressed immediately. How to apply blur in this case ?

In summary server sice calculation/validation should be dones as follows:

If column in changed and focus moved out or enter is pressed in changed column to save, server side sync or if not possible then async method should be called. Changed column name and current edited row values like in edit method are passed as parameters to this method.

This method returns new values for edited row. current edited row values should be replaced with values returned by that method.

Update

Oleg answer assumes that primary key is modified. This factor is not important. Here is new version of question without primary keys and other updates:

jqGrid has product barcode and product name columns.

If product name has changed, server validate method should called to validate name. Current row columns should be updated from data returned by this method.

If product barcode has changed, server validate method should called to validate product barcode. Current row columns should be updated from data returned by this method.

jqGrid should stay in edit mode so that user has possibility to continue changing, accept or reject changes.

How to implement this in inline and form editing? I'm thinking about following possibilites:

Possibility 1.

Use editrules with custom validator like

            editrules = new
            {
                custom = true,
                custom_func = function(value, colname) { ??? }
            },

Issue: custom_func does not fire if input element loses focus. It is called before save for all elements. So it cannot used.

Possibility 2.

Require user to press Enter key to save row. Issues: how to find which column was changed and pass this column number to server. Save method should known column (name or barcode change order) and fill different columns. This looks not reasonable.

Possibility 3.

using blur:

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 Oleg great answer in jqgrid change cell value and stay in edit mode

Summary of requirement:

If column in changed and focus moved out or enter is pressed in changed column to save, server side sync or if not possible then async method should be called. Changed column name and current edited row values like in edit method are passed as parameters to this method.

This method returns new values for edited row. current edited row values should be replaced with values returned by that method.

Update2

This question is not about concurrency. This is single user and jqGrid issue. Updating means that single user changes product name or barcode and server shoudl provide additonal data (product id and/or name/barcode) is responce of this.

Update 4

I tried code below. If user enters new code and presses Enter without moving to other row, blur does not occur and validation is not called.

How to dedect in jqGrid save method if cell is dirty or other idea how to force this code to run if enter is pressed to end edit without losing focus from changed foreign key cell ?

function validate(elem, column) {
ischanged = false;
var i, form, row;
var postData = { _column: column  };
var colModel = $("#grid").jqGrid('getGridParam', 'colModel');
var formEdit = $(elem).is('.FormElement');
// todo: use jQuery serialize()  ???
if (formEdit) {
    form = $(elem).closest('form.FormGrid');
    postData._rowid = $("#grid").jqGrid('getGridParam', 'selrow');
    for (i = 0; i < colModel.length; i++)
        eval('postData.' + colModel[i].name + '="' + $('#' + colModel[i].name + '.FormElement', form[0]).val() + '";');
}
else {
    row = $(elem).closest('tr.jqgrow');
    postData._rowid = row.attr('id');
    for (i = 1; i < colModel.length; i++)
        eval('postData.' + colModel[i].name + '="' + $('#' + postData._rowid + '_' + colModel[i].name).val() + '";');
}
$.ajax('Grid/Validate', {
    data: postData,
    async: false,
    type: 'POST',
    success: function (data, textStatus, jqXHR) {
        for (i = 0; i < data.length; i++) {
            if (formEdit)
                $('#' + data[i].name + '.FormElement', form[0]).val(data[i].value);
            else
                $('#' + postData._rowid + '_' + data[i].name).val(data[i].value);
        }
    }
});
}

colModel is defined as:

{"name":"ProductBarCode",
"editoptions":    {"dataEvents":  
[{"type":"focus","fn":function(e) {ischanged=false}
},
{"type":"change","fn":function(e) {ischanged=true},
{"type":"keydown","fn":function(e) {if(realchangekey()) ischanged=true}
},{"type":"blur","fn":function(e) { if(ischanged) {  validate(       e.target,ProductBarCode')}}
}]},"editable":true}

回答1:

It's one from the problems which is much easier to avoid as to eliminate. I have to remind you about my advises (in the comments to the answer) to use immutable primary key, so that is, will be never changed. The record of the database table can be destroyed, but no new record should have the id of ever deleted record.

On any concurrency control implementation it is important that the server will be first able to detect the concurrency problem. It can be that two (or more) users of your web application read the same information like the information about the employee. The information can be displayed in jqGrids for example. If you allow to change the employee id, than the first problem would be to detect concurrency error. Let us one user will change the employee id and another user will try to modify the same employee based on the previous loaded information. After the user submit the midification, the server application will just receive the "edit" request but will not find the corresponding record in the database. The server will have to sent error response without any detail. So the errorfunc of the editRow or the event handler errorTextFormat of the editGridRow should trigger "reloadGrid" reload the whole grid contain.

If you allow to edit the primary key, then I can imagine more dangerous situation as described before. It can be that another user not only change the id of the current editing row to another value, but one could change the id of one more record so, that its new id will be the same as the current editing id. In the case the request to save the row will overwrite another record.

To prevent such problems and to simplify the optimistic concurrency control one can add an additional column which represent any form of the timestamp in every table of the database which could be modified. I personally use Microsoft SQL Server and add I used to add the non-nullable column of the type rowversion (the same as the type timestamp in the previous version of the SQL Server). The value of the rowversion will be send to the jqGrid together with the data. The modification request which will be send to the server will contain the rowversion. If any data will be save in the database the corresponding value in the corresponding rowversion column will be automatically modified by the SQL database. In the way the server can very easy detect concurrency errors with the following code

CREATE PROCEDURE dbo.spEmployeesUpdate
    -- @originalRowUpdateTimeStamp used for optimistic concurrency mechanism
    -- it is the value which correspond the data used by the user as the source
    @Id int,
    @EmployeeName varchar(100),
    @originalRowUpdateTimeStamp rowversion,
    @NewRowUpdateTimeStamp rowversion OUTPUT
AS
BEGIN
    -- SET NOCOUNT ON added to prevent extra result sets from
    -- interfering with SELECT statements.
    -- ExecuteNonQuery() returns -1, but it is not an error
    -- one should test @NewRowUpdateTimeStamp for DBNull
    SET NOCOUNT ON;

    UPDATE dbo.Employees
    SET Name = @EmployeeName
    WHERE Id=@Id AND RowUpdateTimeStamp=@originalRowUpdateTimeStamp;

    -- get the new value of the RowUpdateTimeStamp (rowversion)
    -- if the previous update took place
    SET @NewRowUpdateTimeStamp = (SELECT RowUpdateTimeStamp
                                  FROM dbo.Employees
                                  WHERE @@ROWCOUNT > 0 AND Id=@Id)
END

You can verify in the code of the server application that the output parameter @NewRowUpdateTimeStamp will be set by the stored procedure dbo.spEmployeesUpdate. If it's not set the server application can throw DBConcurrencyException exception.

So in my opinion you should make modifications in the database and the servers application code to implement optimistic concurrency control. After that the server code should return response with HTTP error code in case of concurrency error. The errorfunc of the editRow or the event handler errorTextFormat of the editGridRow should reload the new values of the currently modified row. You can use either the more complex way or just reload the grid and continue the modification of the current row. In case of unchanged rowid you can easy find the new loaded row and to start it's editing after the grid reloading.

In the existing database you can use

ALTER TABLE dbo.Employees ADD NewId int IDENTITY NOT NULL
ALTER TABLE dbo.Employees ADD RowUpdateTimeStamp rowversion NOT NULL
ALTER TABLE dbo.Employees ADD CONSTRAINT UC_Employees_NewId UNIQUE NONCLUSTERED (NewId)
GO

Then you can use NewId instead of the id in the jqGrid or in any other place which you need. The NewId can coexist with your current primary key till you update other parts of your application to use more effective NewId.

UPDATED: I don't think that one really need to implement any complex error correction for the concurrency error. In the projects at my customers the data which are need be edited can not contain any long texts. So the simple message, which describe the reason why the current modifications could not be saved, is enough. The user can manually reload the full grid and verify the current contain of the row which he edited. One should not forget that any complex procedures can bring additional errors in the project, the implementation is complex, it extend the development budget and mostly the additional investment could never paid off.

If you do need implement automated refresh of the editing row I would never implement the cell validation in "on blur" event for example. Instead of that one can verify inside of errorfunc of the editRow or inside of the errorTextFormat event handler of the editGridRow that the server returns the concurrency error. In case of the concurrency error one can save the id of the current editing row in a variable which could be accessed inside of the loadComplete event handle. Then, after displaying of the error message, one can just reload the grid with respect of $('#list').trigger('reloadGrid',[{current:true}]) (see here). Inside of loadComplete event handle one can verify whether the variable of the aborted editing row is set. In the case one can call editRow or editGridRow and continue the editing of the string. I think that when the current row are changed another rows of the page could be also be changed. So reloading of the current page is better as reloading of the data only one current cell or one row of the grid.