Numeric column in Batch data grid not working properly

[Jeff Butterworth]

I have a data grid with editSettings mode set to Batch (instead of Normal).

I have added code so that I can single click in a cell to start edit mode. This was taken from an answer given to another forum question:
            self.$refs.datagrid.ej2Instances.element.addEventListener('mousedown', function (e) {                                var instance = this.ej2_instances[0];                

                      if (e.target.classList.contains("e-rowcell")) {                    

                          let index = parseInt(e.target.getAttribute("Index"));                    

                          let colindex = parseInt(e.target.getAttribute("ariacolindex"));

                          let field = instance.getColumns()[colindex].field;                    

                          instance.editModule.editCell(index, field);
                     }

                }); 

This is working ok. I can click in a cell and it goes straight to edit mode. I can change the value to 123 and when I click in the same column, next row, the cell updates and continues to show 123 as it should.

However, if I change it to a numeric entry, it doesn't work properly.

I added this code to the column:

:edit="editQuantity" edit-type="numericedit"

and this to the javascript:

editQuantity: {

      params: {                    

          decimals: 0,                    

          min: 1,                    

          max: 9999,                    

          showSpinButton: false                

      }            

},

The numeric works fine. It applies the min and max rules and doesn't show the spin button. However, if I click on the cell below (like I did earlier), the number I entered disappears and it reverts back to its original value. The only way I can get it to keep the number is if I tab out of the field. Clicking out doesn't work

What am I doing wrong?

[Sujith Kumar Rajkumar]

Hi Jeff, 

 

Greetings from Syncfusion support. 

 

Your reported problem was occurring because the custom code for invoking edit on single mousedown click was getting called and corresponding cell edited before the numeric value could be updated in the component. So you can resolve this by using ‘mouseup’ event instead of the mousedown to perform single click edit in the Grid. 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://codesandbox.io/s/vue-forked-sl52p?file=/src/App.vue 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Jeff Butterworth]

Thank you very much. That has fixed my problem

[Sujith Kumar Rajkumar]

Hi Jeff, 

You’re welcome. We are glad to hear that your query has been resolved. 

Regards, 

Sujith R