Editing Cells with Master / Detail

<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <script src="https://unpkg.com/ag-grid-enterprise@17.1.1/dist/ag-grid-enterprise.min.js"></script></head>
<body>

<div style="height: 100%; padding-top: 35px; box-sizing: border-box;">
    <div id="myGrid" class="ag-theme-balham" style="height: 100%"></div>
</div>

<div style="position: absolute; top: 0px; left: 0px;">
    <button onclick="startEditingInMasterRow()">Edit Master</button>
    <button onclick="stopEditingInMasterRows()">Stop Edit Master</button>
    <button onclick="startEditingInDetailRow()">Edit Detail</button>
    <button onclick="stopEditingInDetailRows()">Stop Edit Detail</button>
</div>
    <script src="main.js"></script>
</body>
</html>

var columnDefs = [
    // group cell renderer needed for expand / collapse icons
    {field: 'name', cellRenderer:'agGroupCellRenderer', cellRendererParams: {
          checkbox: true
        }},
    {field: 'account'},
    {field: 'calls'},
    {field: 'minutes', valueFormatter: "x.toLocaleString() + 'm'"}
];

var gridOptions = {
    rowSelection: 'multiple',
    groupSelectsChildren: true,
    suppressRowClickSelection: true,
    rowMultiSelectWithClick: true,
    onRowSelected: this.kmlRowSelected,
    suppressCellSelection: true,
    columnDefs: columnDefs,
    enableColResize: true,
    masterDetail: true,
    detailCellRendererParams: {
        detailGridOptions: {
          rowSelection: 'multiple',
    groupSelectsChildren: true,
    suppressRowClickSelection: true,
    rowMultiSelectWithClick: true,
    onRowSelected: this.kmlRowSelected,
    suppressCellSelection: true,
    columnDefs: columnDefs,
    enableColResize: true,
            columnDefs: [
                {field: 'callId', checkboxSelection: true },
                {field: 'direction'},
                {field: 'number'},
                {field: 'duration', valueFormatter: "x.toLocaleString() + 's'"},
                {field: 'switchCode'}
            ],
            enableColResize: true,
            defaultColDef: {
                editable: true
            },
            onGridReady: function(params) {
                params.api.sizeColumnsToFit();
            }
        },
        getDetailRowData: function(params) {
            params.successCallback(params.data.callRecords);
        }
    },
    detailRowHeight: 340,
    defaultColDef: {
        editable: true
    },
    onGridReady: function (params) {
        params.api.sizeColumnsToFit();

        // arbitrarily expand a row for presentational purposes
        setTimeout(function() {
            var rowCount = 0;
            params.api.forEachNode(function (node) {
                node.setExpanded(rowCount++ === 1);
            });
        }, 500);
    }
};

function startEditingInMasterRow() {
    // stop editing in detail grid
    gridOptions.api.forEachDetailGridInfo(function(detailGridApi) {
        detailGridApi.api.stopEditing();
    });

    // start editing in master grid
    gridOptions.api.startEditingCell({rowIndex: 0, colKey: 'calls'});
}

function stopEditingInMasterRows() {
    gridOptions.api.stopEditing();
}

function startEditingInDetailRow() {
    // stop editing in master grid
    gridOptions.api.stopEditing();

    // start editing in detail grid
    var detailGrid = gridOptions.api.getDetailGridInfo("detail_1");
    detailGrid.api.startEditingCell({rowIndex: 0, colKey: 'number'});
}

function stopEditingInDetailRows() {
    gridOptions.api.forEachDetailGridInfo(function(detailGridApi) {
        detailGridApi.api.stopEditing();
    });
}

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    agGrid.simpleHttpRequest({url: 'https://raw.githubusercontent.com/ag-grid/ag-grid-docs/latest/src/javascript-grid-master-detail/cell-editing/data/data.json'}).then(function(data) {
        gridOptions.api.setRowData(data);
    });
});