pqgridcelleditkeydown, Ajax success response

[omerix]

Hello,

1) I have started to use "pqgridcelleditkeydown". As you have advised, I am succedd at getting "keyCode" with an if clause and use this value.

However after I cahanged the data in a row, when I hit down arrow key, all datas are being posted except the cell where I hit down arrow key. If I use right or left arrow it post everything then if I hit down arrow key there posted data still kept as posted. (Please see attached for the screen shot)

2) "Server side" error control and row changing 

I wanted return a json data and process it in "success". ( Please see below Code-A) But  (please see Code-B below) although "addClass" is running; I could not cahange  Row datas and add a new row. What I need to do is to integrate the code :"http://paramquery.com/demos/editing" which is running.

Note: Could you please help me to write the jquery code as ı am not good at that. Thank you.

(Code-A)

Code: [Select]

"{
    "response": "ok",
    "msg": "Type error, Please again shipment type write",
    "ORDERNO":"ABC"
}

(Code-B)

Code: [Select]

chRowId=ui.rowIndx;
var rowData = {"ID":"95","MODEL":"ABC","ORDERNO":data.ORDERNO};
$grid.pqGrid("addRow", { rowIndxPage: chRowId, rowData: rowData });

Full Code
Adding js.txt

[paramvir]

It looks like couple of issues have been mixed together which makes it difficult to understand the post. Kindly post different issues in separate threads with detailed explanation of what's your goal, what are your steps and what issue you faced.

Let's tackle one issue at a time.

To answer your first point/issue, it seems your goal is to post one cell data at a time when down key is pressed in a cell. Is that right?

Please use cellEditKeyDown to detect and save keyCode only, while use cellSave to post the cell data to server which would make it easier for you.

Steps:

1) In cellEditKeyDown save evt.keyCode in a global variable.

var g_keyCode = evt.keyCode;

2) In cellSave check the keyCode which was saved in global variable in step 1

3) If it's down key (g_keyCode == $.ui.keyCode.DOWN) then post the cell data (ui.rowData[ui.dataIndx]) to server using $.ajax

[omerix]

Hello,

 

The sample here is pretty close what I need: http://paramquery.com/pro/demos/editing. But i do not want to buttons on rows.

1)      When I focus on a cell on the row , I need it to be "EDIT" mode just like edit button hit.

2)      After the changings I have made on the row, when I hit down key, I want row datas to be posted just like "UPDATE" button hit.

3)      I do not want new row button. When I hit down key, then "addROW"

[omerix]

1.) I found out how to edit the cell focused, without hitting edit button. Cell focus edit ok.

Code: [Select]

editable:true,
/*
        editable: function (ui) {
            var rowIndx = ui.rowIndx;
            if ($grid.pqGrid("hasClass", { rowIndx: rowIndx, cls: 'pq-row-edit' }) == true) {
                return true;
            }
            else {
                return false;
            }
        },
*/

2) However after I finish editing cells data and hit down key, it does not post(update) the cells data.

3) Another thing, after I finish editing the cells on a row and hit down key, it does not addRow on lower side of grid.

Could you please help on this by sending me the code as I am not good at jquery?

[omerix]

I'm trying to solve the question 2 (Code-1, Code-2)

The only problem in this code "$grid.pqGrid("commit");" (focus does not allow cell next row)

Code-1

Code: [Select]

$grid.on("pqgridcelleditkeydown", function( event, ui ) {
keyCode=event.keyCode;
if (keyCode == 40) {
update(ui.rowIndx,ui.colIndx);
}
});

Code-2

Code: [Select]

    function update(rowIndx,colIndx) {
        if (!$grid.pqGrid("saveEditCell")) {
            return false;
        }
 
        var rowData = $grid.pqGrid("getRowData", { rowIndx: rowIndx });
        var isValid = $grid.pqGrid("isValid", { rowData: rowData }).valid;
        if (!isValid) {
            return false;
        }
        var isDirty = $grid.pqGrid("isDirty");
        if (isDirty) {
            var recIndx = $grid.pqGrid("option", "dataModel.recIndx");
             $grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });

            var url = "PQGrid.asp?isl=Change";
            if (rowData[recIndx] == null) {
                url = "PQGrid.aso?isl=Save";
            }
            $.ajax($.extend({}, ajaxObj, {
                url: url,
                data: rowData,
                success: function (data,textStatus,jqXHR) {
if (data.response=="error") {
$grid.pqGrid("addClass", {rowIndx:rowIndx, cls: 'ui-state-error'} );
}
else{
$grid.pqGrid("removeClass", {rowIndx:rowIndx, cls: 'ui-state-error'} );
                    var recIndx = $grid.pqGrid("option", "dataModel.recIndx");
                    if (rowData[recIndx] == null) {
                        rowData[recIndx] = data.recId;
                    }
                    $grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
                    $grid.pqGrid("commit");
}
                }
            }));

$grid.pqGrid("editCell", { rowIndx: rowIndx, colIndx: colIndx });
        }
        else {
            $grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
            $grid.pqGrid("refreshRow", { rowIndx: rowIndx });
        }
    }

Question 3 problem continue...

[paramvir]

You are doing good. keep it up!

If you want to edit cell in the next row only after addition / update is successful, then you have to keep

1) ajax request synchronous. {async: false}

or

2) call editCell next row on ajax success.

Moreover rowIndx in your editCell function should be incremented by 1 after update.

$grid.pqGrid("editCell", {rowIndx: (rowIndx + 1),  colIndx: colIndx});