title: Ag-Grid Multi-line Edit with Multi Row Selection
body: <p>I want implement multi row edit based on the selected rows, but unfortunatlty I am unable to find any example on ag-grid documentation. Here is <a href="https://plnkr.co/edit/13E55QtYFyde4eZX" rel="nofollow noreferrer">Plunker</a> link where I have Multi-line checkboxes on Row groups whenever I selected the rows the selected rows become editable but the issues When I  I focus/edit on any one of the cell all of the other selected editable rows become normal. Is ag-grid provide this feature or is it possible in ag-grid? Thanks!</p>
  <pre><code>import { Component } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
  import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
  import { MenuModule } from '@ag-grid-enterprise/menu';
  import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
  import '@ag-grid-community/core/dist/styles/ag-grid.css';
  import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';
  
  @Component({
    selector: 'my-app',
    template: `&lt;ag-grid-angular
      #agGrid
      style=&quot;width: 100%; height: 100%;&quot;
      id=&quot;myGrid&quot;
      class=&quot;ag-theme-alpine&quot;
      [modules]=&quot;modules&quot;
      [columnDefs]=&quot;columnDefs&quot;
      [defaultColDef]=&quot;defaultColDef&quot;
      [autoGroupColumnDef]=&quot;autoGroupColumnDef&quot;
      [rowSelection]=&quot;rowSelection&quot;
      (selectionChanged)=&quot;gridRowSelectionChanged($event)&quot;
      [groupSelectsChildren]=&quot;true&quot;
      [suppressRowClickSelection]=&quot;true&quot;
      [suppressAggFuncInHeader]=&quot;true&quot;
      [rowData]=&quot;rowData&quot;
      (gridReady)=&quot;onGridReady($event)&quot;
    &gt;&lt;/ag-grid-angular&gt;`,
  })
  export class AppComponent {
    private gridApi;
    private gridColumnApi;
  
    public modules: Module[] = [
      ClientSideRowModelModule,
      RowGroupingModule,
      MenuModule,
      ColumnsToolPanelModule,
    ];
    private columnDefs;
    private defaultColDef;
    private autoGroupColumnDef;
    private rowSelection;
    private rowData: [];
  
    constructor(private http: HttpClient) {
      this.columnDefs = [
        {
          field: 'country',
          rowGroup: true,
          hide: true,
        },
        {
          field: 'gold',
          aggFunc: 'sum',
          editable: true
        },
        {
          field: 'silver',
          aggFunc: 'sum',
          editable: true
        },
        {
          field: 'bronze',
          aggFunc: 'sum',
          editable: true
        },
        {
          field: 'age',
          minWidth: 120,
          checkboxSelection: true,
          aggFunc: 'sum',
        },
        {
          field: 'year',
          maxWidth: 120,
        },
        {
          field: 'date',
          minWidth: 150,
        },
      ];
      this.defaultColDef = {
        flex: 1,
        minWidth: 100,
      };
      this.autoGroupColumnDef = {
        headerName: 'Athlete',
        field: 'athlete',
        minWidth: 250,
        cellRenderer: 'agGroupCellRenderer',
        cellRendererParams: { checkbox: true },
      };
      this.rowSelection = 'multiple';
    }
  
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
  
      this.http
        .get('https://www.ag-grid.com/example-assets/olympic-winners.json')
        .subscribe((data) =&gt; {
          this.rowData = data;
        });
    }
  
    gridRowSelectionChanged(params) {
    const selectedNodes = params.api.getSelectedNodes();
      selectedNodes.forEach(node =&gt; {
        this.gridApi.startEditingCell({
          rowIndex: node.rowIndex,
          colKey: 'gold',
        });
      });
    }
  }
  
  </code></pre>