使用多行和自动保存的 ag-grid

Question

I'm using ag-grid (javascript) to display a large amount of rows (about 3,000 or more) and allow the user to enter values and it should auto-save them as the user goes along. My current strategy is after detecting that a user makes a change to save the data for that row.

The problem I'm running into is detecting and getting the correct values after the user enters a value. The onCellKeyPress event doesn't get fired for Backaspace or Paste. However if I attach events directly to DOM fields to catch key presses, I don't know how to know what data the value is associated with. Can I use getDisplayedRowAtIndex or such to be able to reliably do this reliably? What is a good way to implement this?

EDIT: Additional detail

My current approach is to capture onCellEditingStopped and then getting the data from the event using event.data[event.column.colId]. Since I only get this event when the user moves to a different cell and not just if they finish typing I also handle the onCellKeyPress and get the data from event.event.target (since there is no event.data when handling this event). Here is where I run into a hard-to-reproduce problem that event.event.target is sometimes undefined.

I also looked at using forEachLeafNode method but it returns an error saying it isn't supported when using infinite row model. If I don't use infinite mode the load time is slow.

Answer 1

It looks like you can bind to the onCellKeyDown event. This is sometimes undefined because on first keydown the edit of agGrid will switch from the cell content to the cell editor. You can wrap this around to check if there is a cell value or cell textContent.

function onCellKeyDown(e) {
  console.log('onCellKeyDown', e);
  if(e.event.target.value) console.log(e.event.target.value)
  else console.log(e.event.target.textContent)
}

See https://plnkr.co/edit/XhpVlMl7Jrr7QT4ftTAi?p=preview

Answer 2

As been pointed out in comments, onCellValueChanged might work, however

After a cell has been changed with default editing (ie not your own custom cell renderer), the cellValueChanged event is fired.

var gridOptions = {
    rowData: null,
    columnDefs: columnDefs,
    defaultColDef: {
        editable: true, // using default editor
        width: 100
    },
    onCellEditingStarted: function(event) {
        console.log('cellEditingStarted', event);
    },
    onCellEditingStopped: function(event) {
        console.log('cellEditingStopped', event);
    },
    onCellValueChanged: function(event) {
      console.log('cellValueChanged', event);
    }
};

another option could be to craft your own editor and inject it into cells:

function MyCellEditor () {}

// gets called once before the renderer is used
MyCellEditor.prototype.init = function(params) {
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;
    console.log(params.charPress);  // the string that started the edit, eg 'a' if letter a was pressed, or 'A' if shift + letter a
    this.eInput.onkeypress = (e) => {console.log(e);} // check your keypress here
};

// gets called once when grid ready to insert the element
MyCellEditor.prototype.getGui = function() {
    return this.eInput;
};

// focus and select can be done after the gui is attached
MyCellEditor.prototype.afterGuiAttached = function() {
    this.eInput.focus();
    this.eInput.select();
};

MyCellEditor.prototype.onKeyDown = (e) => console.log(e);

// returns the new value after editing
MyCellEditor.prototype.getValue = function() {
    return this.eInput.value;
};
//// then, register it with your grid:
var gridOptions = {
    rowData: null,
    columnDefs: columnDefs,
    components: {
        myEditor: MyCellEditor,
    },
    defaultColDef: {
        editable: true,
        cellEditor: 'myEditor',
        width: 100
    },
    onCellEditingStarted: function(event) {
        console.log('cellEditingStarted', event);
    },
    onCellEditingStopped: function(event) {
        console.log('cellEditingStopped', event);
    }
};