Losing occasional focus, after edit event

[jtflint]

Problem: I have the following event listener, and it works, for the most part. When I edit a cell, it saves the content back to the server. I've added code to getData, and to the following function, to check if Im on the last row, and if so, to add add an additional row, and then refresh. This seems to add the row consistently, as expected, and the cell focus initially transfers to the right cell, however, my cursor ends up in the page input cell about half the time. Im guessing that this is do to the time it takes to make the 2 ajax calls Im doing.
So, one question is, what do I need to do, to make sure that I still end up at the "next" cell?
The second question is, is there an easier way to trigger an "add new row" function? I have a button to add a new row, but i  want to make it smoother for editing, by automatically adding a new row, when reaching the bottom of the page.
thanks.


  $server_grid.on( "pqgridcellsave", function( evt, ui ) {
    var rowData = $server_grid.pqGrid( "getRowData", {rowIndx: ui.rowIndx} );
    window.console && console.log( ui.newVal );
    //console.log('event key: '+event_key);
    var json_arr = JSON.stringify({
      action: 'update'
      ,grid_id: 'servers'
      ,rowIndx: ui.rowIndx
      ,rowIndxPage: ui.rowIndxPage
      ,colIndx: ui.colIndx
      ,dataIndx: ui.dataIndx
      ,newVal: ui.newVal
      ,rowData: rowData
      ,event_key: event_key
    });

    doajaxfn('./ajax/afn_critappdb.php',json_arr);
 
    var totalRecords = $server_grid.data("totalRecords");
    var rowIndx = ui.rowIndx;
   
    //console.log(totalRecords + ' ' + rowIndx);
   
    if( (totalRecords - 1 ) == rowIndx) {

      var json_arr = JSON.stringify({
        action: 'add'
        ,grid_id: 'servers'
        //,rowData: row
      });

     doajaxfn('./ajax/afn_critappdb.php',json_arr); // adds row to .data

      var row = $server_grid.data("add_row");
      var totalRecords = $server_grid.data("totalRecords");
      $server_grid.data("totalRecords",(totalRecords + 1));

      var rowIndx = $server_grid.pqGrid("addRow", { rowData: row } );
      $server_grid.pqGrid("refresh");
    }
   
  });

[paramvir]

Walter

It's not clear from your code whether your ajax calls are asynchronous. it looks like they are synchronous.

Few things you can do to avoid losing cell focus.

1) Try to keep ajax call lightweight, and use async call if possible.

2) combine the ajax calls into one ( I see that both ajax calls are posted to same url)

3) You can manually call editCell method to make it to focus to next cell if above 2 fail to address the issue.

Add New Row

Instead of checking & adding new row from 2 different functions/events cellsave and getData, you can add new row in cellEditKeyDown event

There is a similar example here to add new rows at the bottom

http://paramquery.com/demos/editing

[jtflint]

Ok. Thanks for the info. Valid points.

My ajax calls are async.

I did find one distinct difference on when it works, and doesn't work.
When I use the "enter" key, it works fine, to complete edit, and advance to the next one, it works perfectly.
When I press "tab" to complete an item, though, is when it doesn't work. It puts the focus in the page box at the bottom.

My editModel:
editModel: {
 clicksToEdit: '1', 
 saveKey: $.ui.keyCode.ENTER, // or 13. http://api.jqueryui.com/jQuery.ui.keyCode/
 select: false,
 keyUpDown: false,   
 cellBorderWidth: 0
}

Hmm, so maybe what I need to do is to use the  cellEditKeyDown event, so that i can bind both Tab and Enter. Im also thinking of using the up/down arrow keys, and I think you have a good example for using that event.