How can I dynamically change the options of ag-Grid?

Question

I am creating an ag-grid with the below code. I would like to dynamically change the rowSelection option from single to multiple onClick of a button.

<ag-grid-angular 
  #validateGrid
  style="width: 780px; height: 260px;" 
  class="ag-theme-balham"
  rowSelection="single"
  suppressRowClickSelection="false"
  suppressHorizontalScroll="true" 
  [rowData]="rowData" 
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef" 
  [getRowNodeId]="getRowNodeId"
  (selectionChanged)="onSelectionChanged()"
  (gridReady)="onGridReady($event)" 
  enableCellTextSelection=true>
</ag-grid-angular>

In my Typescript code, I have tried this.gridOptions.rowSelection = 'multiple'; but this does not work. Is there any way to do this?

Possible duplicate of [ag-grid and angular, how to switch grid options dynamically](https://stackoverflow.com/questions/52519129/ag-grid-and-angular-how-to-switch-grid-options-dynamically) — un.spike, Oct 22 '19 at 13:59

Amir Christian · Accepted Answer · 2019-10-08T21:17:47.930

Try this:

your tmpl:

<ag-grid-angular 
  #validateGrid
  style="width: 780px; height: 260px;" 
  class="ag-theme-balham"
  rowSelection="{{rowSelection}}" // Updated
  suppressRowClickSelection="false"
  suppressHorizontalScroll="true" 
  [rowData]="rowData" 
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef" 
  [getRowNodeId]="getRowNodeId"
  (selectionChanged)="onSelectionChanged()"
  (gridReady)="onGridReady($event)" 
  enableCellTextSelection=true>
</ag-grid-angular>

your ts.

public rowSelection: string = 'single';

public changeRowSelection(): void {
    this.rowSelection = 'multiple'; // this is example
}

Thanks for the response, but this doesn't seem to be working for me. — Matt123, Oct 08 '19 at 20:51

How can I dynamically change the options of ag-Grid?

1 Answers1