jQWidgets Forums

Hi Klaus H,

handlekeyboardnavigation is used to override completely the keyboard handling of the Grid i.e all selection, editing, etc. Changing that behavior will include too many changes and will most probably lead to different issues in different situations.

Here is an example handling cell editing and overriding keyboard navigation by closing the editor and moving the selection before, above, below or next.

var data = new Array();
  var firstNames = [
      "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
  var lastNames = [
      "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
  var productNames = [
      "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
  var priceValues = [
      "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
  for (var i = 0; i < 100; i++) {
      var row = {};
      var productindex = Math.floor(Math.random() * productNames.length);
      var price = parseFloat(priceValues[productindex]);
      var quantity = 1 + Math.round(Math.random() * 10);
      row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
      row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
      row["productname"] = productNames[productindex];
      row["price"] = price;
      row["quantity"] = quantity;
      row["total"] = price * quantity;
      data[i] = row;
  }
  var source = {
      localdata: data,
      datatype: "array"
  };
  var dataAdapter = new $.jqx.dataAdapter(source, {
      loadComplete: function (data) {},
      loadError: function (xhr, status, error) {}
  });
  var index = -1;
  var dataField = null;
  var isEditing = false;
$("#jqxgrid").on('cellbeginedit', function (event) 
{
    // event arguments.
    var args = event.args;
    // column data field.
    dataField = event.args.datafield;
    // row's bound index.
    index = event.args.rowindex;
  isEditing = true;
});
$("#jqxgrid").on('cellendedit', function (event) {
isEditing = false;
});
var columns = [{
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          text: 'Last Name',
          datafield: 'lastname',
          width: 100
      }, {
          text: 'Product',
          datafield: 'productname',
          width: 180
      }, {
          text: 'Quantity',
          datafield: 'quantity',
          width: 80,
          cellsalign: 'right'
      }, {
          text: 'Unit Price',
          datafield: 'price',
          width: 90,
          cellsalign: 'right',
          cellsformat: 'c2'
      }, {
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'
      }];
      
  $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      width: 500,
      editable: true,
      selectionmode: 'multiplecellsadvanced',
      handlekeyboardnavigation: function (event) {
          var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;				
          if (isEditing) {
            if (event.key === 'ArrowUp') {
                $("#jqxgrid").jqxGrid('clearselection');
                $("#jqxgrid").jqxGrid('selectcell', index - 1, dataField);
                $("#jqxgrid").jqxGrid('endcelledit', index, dataField, false);
                    return true;
                }
            else if (event.key === 'ArrowLeft') {     
                var columnIndex = columns.map((col) => {
                     return col.datafield;
                }).indexOf(dataField);
                
                var prevCol = columns[columnIndex - 1];
                if (prevCol) {
                    $("#jqxgrid").jqxGrid('clearselection');
                	  $("#jqxgrid").jqxGrid('selectcell', index, prevCol.datafield);
                    $("#jqxgrid").jqxGrid('endcelledit', index, dataField, false);
                    return true;
            	  }
            } 
            else if (event.key === 'ArrowRight') {     
                var columnIndex = columns.map((col) => {
                     return col.datafield;
                }).indexOf(dataField);
                
                var nextCol = columns[columnIndex + 1];
                if (nextCol) {
                    $("#jqxgrid").jqxGrid('clearselection');
	                  $("#jqxgrid").jqxGrid('endcelledit', index, dataField, false);
                	  $("#jqxgrid").jqxGrid('selectcell', index, nextCol.datafield);
                    return true;
                	  }
            } 
            else if (event.key === 'ArrowDown') {   
              	$("#jqxgrid").jqxGrid('clearselection');
								    $("#jqxgrid").jqxGrid('selectcell', index + 1, dataField);
     			        $("#jqxgrid").jqxGrid('endcelledit', index, dataField, false);
                    return true;
            } 
          }
      },
      source: dataAdapter,
      columns: columns
  });

Fiddle: http://jsfiddle.net/mnf6bp8c/3/

Hope this helps.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/