jQuery UI Widgets Forums Grid KeyboardNavigation

This topic contains 4 replies, has 2 voices, and was last updated by  admin 2 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • KeyboardNavigation #120157

    Klaus H
    Participant

    Hi,

    I have a grid with a fixed number of non editable columns and then according to the data a dynamic number of editable columns. I use jqxNumberInput as the editor, because the data are numbers. I have deactivated the spinButtons for the editors. My customer asked me if it is possible to navigate the columns in edit mode with the arrow keys, because the old version of the data display was an excel file.

    I know the standard behaviour for the arrow keys in edit mode is to navigate inside the editor field and one should use TAB or Alt+Tab to navigate between the fields. But is it possible to change this behaviour for the 4 arrow keys? If it’s possible, maybe it is with the option handlekeyboardnavigation, but there are not many examples. Maybe there I would have to find the current cell and select the according cell or is there a simplier way in which I can switch out the key behaviour?

    Best Regards
    Klaus H

    KeyboardNavigation #120196

    admin
    Keymaster

    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/

    KeyboardNavigation #120251

    Klaus H
    Participant

    Hello Peter,

    thank you very much, that looks very helpful. 🙂

    Best Regards
    Klaus H

    KeyboardNavigation #120253

    Klaus H
    Participant

    Hi,

    ArrowLeft and ArrowRight work exactly as in your example.

    ArrowUp and ArrowDown are not triggered in my grid. The difference is, I use jqxNumberInput as editor, that means I have these two attributes per column:
    columntype: ‘numberinput’
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ decimalDigits: 2, digits: 2, min: 0, max: 24, spinButtons: false, spinMode: ‘simple’ });
    }

    If the editor is visible ArrowUp and ArrowDown simply behave like a normal jqxNumberInput and uses them to spin. I tried spinMode: ‘simple’ to disable it, but that did nothing. I think the jqxNumberInput blocks these key events because it consumes them itself. Is there any way around that?

    Best Regards
    Klaus H

    KeyboardNavigation #120495

    admin
    Keymaster

    Hi Klaus,

    I created a work item about the reported NumberInput & Keyboard navigation behavior in our Grid component. Ref: https://github.com/jqwidgets/jQWidgets/issues/423

    Best regards,
    Peter Stoev

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.