Functionality And Events Of Angular Grid

Introduction

In this article, I will explain about functionality and events of Angular Grid.

Overview

Angular Grid is a part of ag-Grid where Ag stands for agnostic. ag-Grid supports Angular using a wrapper component. The wrapper component is used in the application by ag-grid like another Angular component. 

You can refer to the basic fundamentals of AG-Grid using my previous article.

Angular Data Grid: Row Selection

Select a row by clicking on it. Selecting a row will remove any previous selection. You can set Single row selection and Multiple row selection.

Single Row Selection

 [rowSelection]="single"

Multiple Row Selection

You can set multiple row selection by using set rowSelection="multiple"  and you need to hold cntrl then click on multiple rows then it select mutliple rows.

 [rowSelection]="multiple"

Also you can set multiple row selections using checbox.

 columnDefs = [
    {
      field: '',
      headerCheckboxSelection: true,
      headerCheckboxSelectionFilteredOnly: true,
      checkboxSelection: true,
      maxWidth: 50,
    },
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ];

Component.html

<ag-grid-angular
  style="width: 500px; height: 200px;"
  class="ag-theme-alpine"
  [rowSelection]="rowSelection"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  (gridReady)="onTableGridReady($event)"
  (selectionChanged)="onSelectionChanged($event)"
>
</ag-grid-angular>

Component.ts

import { Component } from '@angular/core';
import {
  GridApi,
  GridReadyEvent,
  SelectionChangedEvent,
} from 'ag-grid-community';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  private gridApi?: GridApi;

  columnDefs = [
    {
      field: '',
      headerCheckboxSelection: true,
      headerCheckboxSelectionFilteredOnly: true,
      checkboxSelection: true,
      maxWidth: 50,
    },
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ];
  rowSelection = 'multiple';
  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];
  onTableGridReady(event: GridReadyEvent) {
    this.gridApi = event.api;
  }
  onSelectionChanged(event: SelectionChangedEvent) {
    const rows = this.gridApi?.getSelectedNodes();
    console.log(rows);
  }
}

Angular Data Grid: Row Click

If you want to get data from ag-grid to perform any functionality then you can use row clicks event. You can apply single click or doubleclick event.

Single-Row-Click Event

You can apply single row click event using (rowClicked) 

Double-Row-Click Event

You can apply single row click event using (rowDoubleClicked) 

HTML

<ag-grid-angular
  style="width: 500px; height: 200px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  (rowClicked)="onRowClicked($event)"
  (rowDoubleClicked)="onRowDoubleClicked($event)"
>
</ag-grid-angular>

component.ts

import { Component } from '@angular/core';
import {
  GridApi,
  GridReadyEvent,
  SelectionChangedEvent,
} from 'ag-grid-community';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  private gridApi?: GridApi;

  columnDefs = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ];
  rowSelection = 'multiple';
  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];
  onRowDoubleClicked(event: SelectionChangedEvent) {
    console.log(event);
  }
  onRowClicked(event: SelectionChangedEvent) {
    console.log(event);
  }
}

Angular Data Grid: Cell Rendering

By default, the grid renders values into the cells as strings. If you want something more complex you use a cell renderer.

{
        cellRenderer: params => {
            // put the value in bold
            return 'Value is **' + params.value + '**';
    }
}

Component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  columnDefs = [
    {
      field: 'make',
      cellRenderer: (params) => {
        // put the value in bold
        return 'Value is **' + params.value + '**';
      },
    },
    { field: 'model' },
    { field: 'price' },
  ];
  rowSelection = 'multiple';
  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];
}

Summary

I hope you will enjoy the article. It is a very useful functionality and it will help you.