I am new to ag-grid, currently in my angular 7 project I am implementing the ag-grid.
I have checkboxSelection true for each row. I have kept the "checkboxselection: true" for field(column) 'Athlete'. I am trying to disable all the remaining checkboxes (or rows) after user selects 3 checkboxes (3 rows) but I don't know how to accomplish this.
Any help would be highly appreciated.
I have shared my code below:
checkbox-selection.component.html
<button (click)="getSelectedRows()">Get Selected Rows</button>
<ag-grid-angular
#agGrid
style="width: 100%; height: 80vh;"
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowData]="rowData"
[rowSelection]="rowSelection"
[suppressRowClickSelection] = "true"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
checkbox-selection.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AgGridAngular } from 'ag-grid-angular';
@Component({
selector: 'app-checkbox-selection',
templateUrl: './checkbox-selection.component.html',
styleUrls: ['./checkbox-selection.component.scss']
})
export class CheckboxSelectionComponent implements OnInit {
gridApi;
gridColumnApi;
columnDefs;
defaultColDef;
rowSelection;
rowData;
@ViewChild('agGrid') agGrid: AgGridAngular;
constructor(private http: HttpClient) {
this.columnDefs = [
{
headerName: 'Athlete',
field: 'athlete',
width: 200,
checkboxSelection: true
},
{
headerName: 'Age',
field: 'age',
width: 90
},
{
headerName: 'Sport',
field: 'sport',
width: 110
}
];
this.defaultColDef = {
width: 200,
sortable: true,
resizable: true,
filter: true
};
this.rowSelection = 'multiple';
}
ngOnInit() {}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.http
.get(
'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json'
)
.subscribe(data => {
this.rowData = data;
});
}
getSelectedRows() {
const selectedNodes = this.agGrid.api.getSelectedNodes();
const selectedData = selectedNodes.map(node => node.data);
const selectedDataStringPresentation = selectedData
.map(
node =>
'(' +
node.athlete +
', age: ' +
node.age +
', sport: ' +
node.sport +
')'
)
.join(', ');
alert(`Selected nodes: ${selectedDataStringPresentation}`);
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from './material/material.module';
import { AgGridModule } from 'ag-grid-angular';
import 'ag-grid-enterprise';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CheckboxSelectionComponent } from './components/checkbox-selection/checkbox-selection.component';
@NgModule({
declarations: [
AppComponent,
CheckboxSelectionComponent,
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule,
FlexLayoutModule,
HttpClientModule,
MaterialModule,
AgGridModule.withComponents([])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
I can select multiple rows using checkbox but, I need to disable remaining rows as soon as user is done selecting 3 checkboxes.
Aucun commentaire:
Enregistrer un commentaire