Jsgrid: Hitting Enter key when editing value

[ashhorner]

Hi,

I am using jsGrid on a form which also has a button that opens a Jquery UI dialog. The jsGrid is set to edit on only one column, defined as follows:

{ name: "quantity", type: "number", width: 50, editing:true},

When I edit the value in the above column - either by typing in a new number or by clicking the up/down arrow - and then hit enter, the Jquery UI dialog is shown when enter is hit.

The button to show the dialog does not have focus (as far as I can see) as the row in the jsGrid has just been clicked.

What I'd like to happen is that the new value is accepted when I hit enter - no dialog should be shown.

Thanks,

Ashley

[tabalinas]

The built-in keyboard support is an upcoming feature. What you could do for now is in onRefreshed callback set tabindex for <tr> (so that they will take keyboard focus) and handle Enter key attaching keypress handler. In this handler - call updateItem method without parameters.

[ashhorner]

unfortunately this doesn't seem to work - I added code to alert when onRefreshed is called and I can see it firing but not when the value in a cell is edited:

onRefreshed: function(args) {
alert("!");
}

[tabalinas]

Yes, sure, it's fired when data is rendered. So on this callback you just add necessary handlers and properties. Real handling and updateItem call should be done in keypress handler, which you attach in onRefreshed callback.

[ashhorner]

thanks again. I know that this is probably quite straightforward, but I have no idea how to do it. Are you able to share sample code or point me in the right direction?

Thanks,

Ashley

[tabalinas]

the main idea is the following:

onRefreshing: function(args) {
    $("#jsGrid").find("tbody tr")
        .attr("tabindex", -1) // to make rows focussable
        .on("keydown", function(e) {
            // handle Enter key
            if(e.which === 13) {
                args.grid.updateItem();
                e.preventDefault();
            }
        });
}

I didn't tested the code, let me know if you need help to follow up.

[ashhorner]

thanks once again...but unfortunately it didn't stop the enter key from triggering a button press elsewhere on the form.

As before, I put an alert in to see when it was firing and it doesn't fire when the enter key is pressed.

Ashley

[tabalinas]

Could you provide a jsfiddle (or another demo) to show the problem?

[ashhorner]

sure...this is a google sheets project where I am using their HTMLService to show various forms, one of which has the jsGrid.

The spreadsheet is here, not sure if it will work if I just paste the link so if you can let me know an email address I will share it with you:

https://docs.google.com/spreadsheets/d/1KFiXpPA3bIb0Yjupaa-hOxe5kxYhyUmjeoEwHmPCAFM/edit#gid=50932755

To replicate the issue:

1. click on CRM on the menu, and then 'New Proposal'
2. on the form, add a product to the jsGrid
3. Click on the grid and increment the quantity cell
4. Hit enter and the 'new client' dialog is shown

Thanks again!

Ashley

[tabalinas]

requested permissions to access it.

[tabalinas]

The solution is your case should be a little bit different. Here you just have to handle keydown on the quantity field like following:

    { name: "quantity", type: "number", width: 50, editing:true, 
        editTemplate: function(value) {
          var $result = jsGrid.fields.number.prototype.editTemplate.call(this, value);
          $result.on("keydown", function(e) {
            if(e.which === 13) {
                $("#jsGrid").jsGrid("updateItem");
                return false;
            }
          });
          return $result;
        }
      }

[ashhorner]

thank you, this works great. I really appreciate your help.

Ashley

[johnmorganhill]

Also trying to add keyboard support on a text field:

jsGrid.fields.text.prototype.editTemplate.call(this, value) is throwing Uncaught RangeError: Maximum call stack size exceeded, any clue?

[LegendaryLinux]

After bumping into this problem myself, I worked out a very easy way to accomplish saving a row when a user presses enter:
onRefreshed: (args) => { $('#table-container-div').off().on('keydown','input[type=text], input[type=number]',(event) => { if(event.which === 13){ // Detect enter keypress args.grid.updateItem(); // Update the row } });