Get access to gridOptions of grid created by cell renderer

Question

I am using ag-Grid to create a grid within a grid using a cell renderer. This is the code for the cell renderer.

// cell renderer class
function TestCellRenderer() {
}

// init method gets the details of the cell to be rendered
TestCellRenderer.prototype.init = function(params) {
    this.eGui = document.createElement('div');

    // console.log('params.value:', params.value);
    // console.log('eGui', this.eGui.style);

    this.eGui.style.width = '70%';
    this.eGui.classList.add("ag-theme-balham");

    this.gridOptions = {
        columnDefs: params.columns,
        rowData: rowDataContained,
        domLayout: "autoHeight",
        rowHeight: 50,
        // suppressRowClickSelection: true,
        popupParent: document.querySelector('body'),
        rowDragManaged: true,
        components: {
            'actionCellRenderer': ActionCellRenderer,
            'selectCellRenderer': SelectCellRenderer
        },
        onCellEditingStopped: function(event) {
            console.log('cellEditingStopped');
        },
        onRowClicked: function(event) { console.log('A row was clicked:', event); },
    }
    // console.log('gridOptions:', this.gridOptions);

    new agGrid.Grid(this.eGui, this.gridOptions);
};

TestCellRenderer.prototype.getGui = function() {
    return this.eGui;
};

This screenshot will better explain what I've done.

My problem is, I have created a select2 cell editor for the "Dropdown" column but am having issues calling the api.StopEditing() function when the user clicks on an option in the select menu because it requires the gridOptions that were created on the fly using the renderer.

If the user changes focus to a different cell, the editing does stop but I want to be able to have it stop the moment the user selects a value. I was able to print something to the console when the user selects something, but I don't know how to access the gridOptions of that specific grid.

have you named your gridOptions for both grids gridOptions? Wouldn't it work if you called your inner grid's gridOptions something like innerGridOptions and then called stopEditing on that? — ViqMontana
Thanks for your reply, I fixed it by adding the following to my custom cell editor init function: $(this.eInput).on('select2:select', function(e) { console.log('Works!', this); params.stopEditing(); }); — m.willes

m.willes m.willes · Accepted Answer · 2021-02-12T13:47:22

For anyone wondering, I solved the problem by adding the following to my selectCellEditor.prototype.init function:

$(this.eInput).on('select2:select', function(e) {
    console.log('Works!', this);
    params.stopEditing();
});

What's happening there is, the moment the user selects an option, the menu is closed and the value is changed in the cell.

Get access to gridOptions of grid created by cell renderer

1 Answers