1. Home
  2. Forum
  3. Vue
  4. Unable to get updated value when using BatchEdit and arrow keys in Grid

Unable to get updated value when using BatchEdit and arrow keys in Grid

I've tried everything to make this work but this has me stumped.

My grid uses batch edit and I have added an event listener to the gridLoad function in order to navigate though the editable cells like an excel file as I have 4 editable rows (3 numeric, 1 string).

The navigation works great but it's buggy when it comes to actually registering updated values.

Arrow up / down change the rows and they work great. Same for enter (goes to next row).

Tab also works great. 

However when using the left / right arrows on columns of numeric edit and staying in the same row, the edited value is lost and I cannot seem to access it. I've made it so tab and right arrow have the same behavior but there's only a problem with the right arrow and I can't seem to figure it out. I am using a valueAccessor on the numeric edits that don't seem to work with the arrows and they show as receiving an undefined value with arrows, and the updated value with tab/enter/up/down arrows.

I've tried going around the problem by mapping keyConfigs.rightArrow = 'tab' but it doesn't seem to be registering and the problem persists.

I'd be grateful for any pointers, let me know if you need to see more of my code.

gridLoad: function () {
             let gridInstance = document.getElementById("orderGoodsList").ej2_instances[0];
             gridInstance.element.addEventListener("keydown", (e) => {
                var closesttd = e.target.closest("td");
                let next;

                switch(e.keyCode){
                    case 9: //TAB
                    case 39: //RIGHT

                        if(closesttd.nextSibling != null && closesttd.nextSibling != undefined) {
                            this.goRight(closesttd.nextSibling);
                        } else {
                            if(gridInstance.getRows().length - gridInstance.getSelectedRowIndexes()[0] < 10){
                                document.querySelector(":focus").blur();
                                gridInstance.element.children[6].children[0].scrollBy(0, 500);
                                setTimeout(() => {
                                    if(closesttd.closest("tr").nextSibling != null && closesttd.closest("tr").nextSibling != undefined){
                                        this.goRight(closesttd.closest("tr").nextSibling.querySelectorAll("td")[0]);
                                    } else {
                                        this.editACell(closesttd);
                                    }
                                }, 200);
                            } else {
                                if(closesttd.closest("tr").nextSibling != null && closesttd.closest("tr").nextSibling != undefined){
                                    this.goRight(closesttd.closest("tr").nextSibling.querySelectorAll("td")[0]);
                                } else {
                                    this.editACell(closesttd);
                                }
                            }
                        }
                    break;

                    case 37: //LEFT
                        if(closesttd.previousSibling != null && closesttd.previousSibling != undefined ) {
                                next = this.checkLeft(closesttd.previousSibling);
                                if(next != null && next != undefined){
                                    this.editACell(next);
                                } else {
                                    if(closesttd.closest("tr").previousSibling != null && closesttd.closest("tr").previousSibling != undefined){
                                        this.goLeft(closesttd.closest("tr").previousSibling.querySelectorAll("td")[closesttd.closest("tr").previousSibling.querySelectorAll("td").length-1]);
                                    } else {
                                        this.editACell(closesttd);
                                    }
                                }
                            } else {
                                this.editACell(closesttd);
                            }
                    break;

                    case 38: //ARROW UP

                        if(closesttd.closest("tr").previousSibling != null && closesttd.closest("tr").previousSibling != undefined){
                            if(closesttd.closest("tr").previousSibling.querySelectorAll("td")[parseInt(closesttd.getAttribute("data-colindex"))].classList.contains('cell-greyed-out')){
                                this.goRight(closesttd.closest("tr").previousSibling.querySelectorAll("td")[0]);
                            } else {
                                this.editACell(closesttd.closest("tr").previousSibling.querySelectorAll("td")[parseInt(closesttd.getAttribute("data-colindex"))]);
                            }    
                        } else {
                            this.editACell(closesttd);
                        }

                    break;

                    case 13: //ENTER
                    case 40: //ARROW DOWN
                        if(closesttd.closest("tr").nextSibling != null && closesttd.closest("tr").nextSibling != undefined){
                            if(gridInstance.getRows().length - gridInstance.getSelectedRowIndexes()[0] < 10){
                                document.querySelector(":focus").blur();
                                gridInstance.element.children[6].children[0].scrollBy(0, 500);
                                setTimeout(() => {
                                    if(closesttd.closest("tr").nextSibling){
                                        if(closesttd.closest("tr").nextSibling.querySelectorAll("td")[parseInt(closesttd.getAttribute("data-colindex"))].classList.contains('cell-greyed-out')){
                                            this.goRight(closesttd.closest("tr").nextSibling.querySelectorAll("td")[0]);
                                        } else {
                                            this.editACell(closesttd.closest("tr").nextSibling.querySelectorAll("td")[parseInt(closesttd.getAttribute("data-colindex"))]);
                                        }
                                    }
                                }, 200);
                            } else {
                                if(closesttd.closest("tr").nextSibling.querySelectorAll("td")[parseInt(closesttd.getAttribute("data-colindex"))].classList.contains('cell-greyed-out')){
                                    this.goRight(closesttd.closest("tr").nextSibling.querySelectorAll("td")[0]);
                                } else {
                                    this.editACell(closesttd.closest("tr").nextSibling.querySelectorAll("td")[parseInt(closesttd.getAttribute("data-colindex"))]);
                                }
                            }
                        } else {
                            this.editACell(closesttd);
                        }
                    break;
                }
               
            });
        },

gridCreated: function () {
            let gridInstance = document.getElementById("orderGoodsList").ej2_instances[0];
            gridInstance.getContentTable().addEventListener("click", (args) => {
                    if (args.target.classList.contains("e-rowcell")) {
                        gridInstance.editModule.editCell(parseInt(args.target.getAttribute("index")),gridInstance.getColumnByIndex(parseInt(args.target.getAttribute("data-colindex"))).field
                    );
                }
            });
        },

        editACell: function (args) {
            let gridInstance = document.getElementById("orderGoodsList").ej2_instances[0];
            gridInstance.editModule.editCell(parseInt(args.getAttribute("index")),gridInstance.getColumnByIndex(parseInt(args.getAttribute("data-colindex"))).field);
        },

3 Replies
AR Aishwarya Rameshbabu Syncfusion Team November 22, 2024 04:22 PM UTC

Hi Julie,


Greetings from Syncfusion support.


Based on the information provided, it appears that you are utilizing the Batch mode of editing in the Syncfusion Grid with single-click editing enabled and navigation using arrow keys. You are encountering an issue where edited values in numeric edit type columns are not saved when using the Left/Right arrow keys. This issue does not occur with the Tab key but specifically arises with the Left/Right arrows.


The problem with the numeric edit type column stems from the fact that the change event of the Numeric Textbox is not triggered when pressing the arrow keys. The change event is triggered when changing the value through the up/down arrow buttons in the component, using the keyboard Up/Down arrow keys, or when losing focus on the component. In your case, it seems you are manually updating the value using keyboard keys and then pressing the arrow keys to save them. Since the component does not trigger the change event in this scenario, it retains the old value.


To address this issue, we recommend using the cell-edit-template feature in the Grid. This feature allows you to render custom cell editors using external functions create, read, write and destroy. Please refer to the documentation link below for more information on the cell-edit-template feature. In the read method, we have utilized the focusOut method of the Numeric Textbox component to trigger the change event of the component. Below is a code example and a video demonstration for more details, where we used the cell-edit-template and valueAccessor features for the 'Freight' column.


App.vue

 

  <ejs-grid ref="grid" id="grid" :dataSource='data' :enableHover='false' :created='created' :load='load' :editSettings='editSettings' :toolbar='toolbar' height='273px'>

    <e-columns>

    <e-columns>

     ……………….

    <e-column field='Freight' headerText='Freight' textAlign= 'Right' :edit='numericParams' width=120 :valueAccessor='currencyFormatter'></e-column>

  </e-columns>

    </e-columns>

  </ejs-grid>

 

 

 

function createCustomerIDFunction() { // create the component

  inputElement = document.createElement("input");

  return inputElement;

}

 

function destroyCustomerIDFunction() { // Destroy the component 

  if (numericTextBoxInstance) {

    numericTextBoxInstance.destroy(); 

  }

}

 

function readCustomerIDFunction(args) { // Reading the changed value from the component

  numericTextBoxInstance.focusOut()

  return  numericTextBoxInstance.value;

}

 

function writeCustomerIDFunction(args) { // Setting the default value to the component

  numericTextBoxInstance = new NumericTextBox({

    value: args.rowData[args.column.field],    

  });

  numericTextBoxInstance.appendTo(inputElement);

}

 

 

numericParams : {   

        create: createCustomerIDFunction,

        destroy: destroyCustomerIDFunction,

        read: readCustomerIDFunction,

        write: writeCustomerIDFunction,

    },

 



Sample: Fxhnn5 (forked) - StackBlitz


Documentation Link:

Rendering-custom-cell-editors-using-external-function


If you still encounter any issues, please try to replicate the issue with the shared sample or provide a simple issue replication sample. Additionally, sharing a video demonstration of the issue replication process would be very helpful.


Regards

Aishwarya R


JU Julie November 23, 2024 02:10 AM UTC

This solved the issue perfectly, it's now working exactly as we need it to. Thank you very much!


AR Aishwarya Rameshbabu Syncfusion Team November 25, 2024 08:44 AM UTC

Hi Julie,


We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.


Regards

Aishwarya R


Loader.
Up arrow icon