lundi 9 septembre 2019

How to make remaining checkboxes (rows) disabled after selecting 3 checkboxes in ag-grid?

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