Uncaught TypeError: Cannot read property getColSpanningList

Question

I am working with ag-Grid and Node.js to do some updates in the database. I am doing a calculation on 5 fields. I am using the onCellValueChanged event in order to do calculations for field2, field3, field4, field5 based of the change in field1. I can see the change when there is a mouse click event. However, the problem arises when I hit the TAB key on the keyboard. It gives me this error:

ag-grid-community.min.noStyle.js:110 Uncaught TypeError: Cannot read property 'getColSpanningList' of undefined
    at t.getLastCellOfColSpan (ag-grid-community.min.noStyle.js:110)
    at t.findNextCellToFocusOn (ag-grid-community.min.noStyle.js:110)
    at t.moveToNextEditingCell (ag-grid-community.min.noStyle.js:110)
    at t.moveToCellAfter (ag-grid-community.min.noStyle.js:110)
    at t.onTabKeyDown (ag-grid-community.min.noStyle.js:110)
    at t.onTabKeyDown (ag-grid-community.min.noStyle.js:242)
    at t.onKeyDown (ag-grid-community.min.noStyle.js:242)
    at t.processKeyboardEvent (ag-grid-community.min.noStyle.js:530)

This is my ejs template:

selection.ejs

var tableCols = <%- JSON.stringify(tables) %>;
var rowData = tableCols;

var columnDefs = [
                  {headerName: "Field1", field: "field1", editable: true},
                  {headerName: "Field2", field: "field2"}, 
                  {headerName: "Field3", field: "field3"},
                  {headerName: "Field4", field: "field4"}, 
                  {headerName: "Field5", field: "field5"},
                  {headerName: "Total", field: "total"}
                 ];

var gridOptions = {
             columnDefs: columnDefs,
             rowData: rowData,
             onCellValueChanged: function(params){
                 var d = params.data.field1;
                 var id = params.data.Unique_ID;
                 params.field2  = (.25 * params.data.field1).toFixed(2);
                 var q = params.data.field2;

                    params.data.field3 = (0 * params.data.field1).toFixed(2);
                    var b = params.data.field3;

                    params.data.field4 = (.175 * params.data.field1).toFixed(2);
                    var p = params.data.field4;

                    params.data.field5 = (.20 * params.data.field1).toFixed(2);
                    var a = params.data.field5;

                    params.data.total = (parseFloat(params.data.field1) + parseFloat(params.field2 ) + parseFloat(params.data.field3) + parseFloat(params.data.field4) + parseFloat(params.data.field5)).toFixed(0);
                    var t = params.data.total; 

                    this.api.refreshCells();
                  },
                  onCellEditingStarted: function(event){
                        console.log("started");
                      }, 
                // this is where the error happens, then logs "cellEditingStopped"

                  onCellEditingStopped: function(event) {
                      console.log('cellEditingStopped');
                    }
                };

I don't understand how can pressing the TAB key cause the error, but not on MOUSE click. Any help would be appreciated. Thank you.

Benny Chan Benny Chan · Accepted Answer · 2019-08-21T09:06:15

I can reproduce this issue. When you tab to the next column with editable: false, it will give the error. If you comment the option editable: false, tab will work without the problem.

I guess you may need to implement your own tabToNextCell: https://www.ag-grid.com/javascript-grid-keyboard-navigation/#tabtonextcell

I am figuring out how to skip the editable: false cell.

Uncaught TypeError: Cannot read property getColSpanningList

1 Answers