General Category > Help for ParamQuery Pro

Losing occasional focus, after edit event

(1/1)

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:
[ Only Pro members may read this post. ]

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.

Navigation

[0] Message Index

Go to full version