Angular AG Grid

    0

    0

    toperbermudez

    The code above has an ag-grid-angular element with the following attributes:

    style="height: 25rem"

    class="ag-theme-balham"

    [columnDefs]="gridOptions.columnDefs"

    [defaultColDef]="gridOptions.defaultColDef"

    [rowData]="data"

    [rowSelection]="'multiple'"

    [animateRows]="true"

    [enableCellTextSelection]="true"

    [overlayLoadingTemplate]="loadingOverlay"

    [overlayNoRowsTemplate]="noRowsOverlay"

    (gridReady)="gridOptions.onGridReady($event)"

    (cellClicked)="gridOptions.onCellClicked($event)"

    [quickFilterText]="searchKey"

    </ag-grid-angular>

    The code above has two inputs, searchKey and quickFilterText, both of which are of type text. The code also has a p element with the text-muted class. When the user clicks on either of the inputs, the code will invoke the gridOptions.onGridReady()

    
    <div class="row mb-1 d-flex justify-content-end">
      <div class="col-md-3">
        <input type="text" class="form-control form-control-sm" [(ngModel)]="searchKey" placeholder="Quick search.." [disabled]="loading">
      </div>
    </div>
    
    <ag-grid-angular
      style="height: 25rem"
      class="ag-theme-balham"
      [columnDefs]="gridOptions.columnDefs"   
      [defaultColDef]="gridOptions.defaultColDef"
      [rowData]="data"
      [rowSelection]="'multiple'"
      [animateRows]="true"
      [enableCellTextSelection]="true"
      [overlayLoadingTemplate]="loadingOverlay"
      [overlayNoRowsTemplate]="noRowsOverlay"
      (gridReady)="gridOptions.onGridReady($event)"
      (cellClicked)="gridOptions.onCellClicked($event)"
      [quickFilterText]="searchKey"
      ></ag-grid-angular>
    <p class="text-muted mt-2">Result: {{ dataCount | number}}</p>
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.