Events

Set of events introduced to the data table to serve & fulfill different user requirements and to manage events performed on top of the data table. All the events are triggers based on predefined events hierarchy.

Events Hierarchy

All available data table events are initialize to the following sequence depends on it's invoking behaviour (Automatic / User Triggers).

    |__ Ornamentum Events
       |
       |___ Data Table Events
       |     |
       |     |___ Automatically Triggers
       |     |     |
       |     |     |-- Column Bind // triggers for each column binding.
       |     |     |-- Init // trigger data table initialization.
       |     |     |-- Data Bound // triggers after the data binding completion.
       |     |     |-- Row Bind // triggers when binding data for available rows.
       |     |     |-- Cell Bind // triggers when binding cell data.
       |     |
       |     |___ Manually Triggers
       |           |
       |           |-- Row Select Change // triggers when row select state is changes.
       |           |-- All Row Select Change // trigger all row select mouse click event.
       |           |-- Row Click // triggers user row single click events on data table.
       |           |-- Row Double Click  // triggers user row double click events on data table.
       |           |-- Cell Click // triggers when click on table cell.
       |           |-- Header Click // triggers table column header click mouse event.
       |
       |___ Dropdown Events
       |
      \/
  

Basic Usage

As mention in the Events Hierarchy, all available events can be bind to the data table as follows try by yourself to get familiar. for individual event usages refer Useful Events section.

  <ng-data-table
    ...
      (init)="onDataTableInit($event)"
      (allRowSelectChange)="onAllRowSelectChange($event)"
      (rowBind)="onRowBind($event)"
      (rowSelectChange)="onRowSelectChange($event)"
      (cellBind)="onCellBind($event)"
      (cellClick)="onCellClick($event)"
      (columnBind)="onColumnBind($event)"
      (dataBound)="onDataBound()"
      (headerClick)="onHeaderClick($event)"
      (rowClick)="onRowClick($event)"
      (rowDoubleClick)="onRowDoubleClick($event)">
  </ng-data-table>

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 30
[ROW BIND] event is called for row ID - 30
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 25
[ROW BIND] event is called for row ID - 25
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 20
[ROW BIND] event is called for row ID - 20
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 15
[ROW BIND] event is called for row ID - 15
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[CELL BIND] event is called for row ID - 10
[ROW BIND] event is called for row ID - 10
[DATA BOUND] event is called
[INIT] event is called
[COLUMN BIND] event is called for column - Gross Margin
[COLUMN BIND] event is called for column - Quantity
[COLUMN BIND] event is called for column - Revenue
[COLUMN BIND] event is called for column - Product Type
[COLUMN BIND] event is called for column - Product Line
[COLUMN BIND] event is called for column - Retailer Type
[COLUMN BIND] event is called for column - Order Method Type
[COLUMN BIND] event is called for column - ID

import { AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

import {
  DataTableCellBindEventArgs,
  DataTableCellClickEventArgs,
  DataTableColumnComponent,
  DataTableComponent,
  DataTableDoubleClickEventArgs,
  DataTableHeaderClickEventArgs,
  DataTableRow,
  DataTableRowClickEventArgs
} from 'ornamentum';

@Component({
  selector: 'app-events-usage',
  templateUrl: './events-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsUsageComponent implements AfterViewInit {
  public items: ExampleData[];
  public allEventsData: string[] = [];

  constructor(private dataFetchService: DataFetchService, private cd: ChangeDetectorRef) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public ngAfterViewInit(): void {
    this.cd.detectChanges();
  }

  public onDataTableInit(dataTable: DataTableComponent): void {
    this.allEventsData.push('[INIT] event is called');
  }

  public onAllRowSelectChange(allRowSelectedChanged: boolean): void {
    this.allEventsData.push(`[SELECT ALL] Checkbox Status: ${allRowSelectedChanged}`);
  }

  public onRowBind(dataRow: DataTableRow<ExampleData>): void {
    this.allEventsData.push(`[ROW BIND] event is called for row ID - ${dataRow.item.id}`);
  }

  public onRowSelectChange(selectedData: ExampleData | ExampleData[]): void {
    this.allEventsData.push(`[SELECTED ROW VALUES] ${JSON.stringify(selectedData)}`);
  }

  public onCellBind(cellBindEventArgs: DataTableCellBindEventArgs<any>): void {
    this.allEventsData.push(`[CELL BIND] event is called for row ID - ${cellBindEventArgs.row.item.id}`);
  }

  public onCellClick(cellClickEventArgs: DataTableCellClickEventArgs<any>): void {
    this.allEventsData.push(`[SELECTED COLUMN] is ${cellClickEventArgs.column.title} & [ROW ID] is - ${cellClickEventArgs.row.item.id}`);
  }

  public onColumnBind(dataTableColumnComponent: DataTableColumnComponent): void {
    this.allEventsData.push(`[COLUMN BIND] event is called for column - ${dataTableColumnComponent.title}`);
  }

  public onDataBound(): void {
    this.allEventsData.push('[DATA BOUND] event is called');
  }

  public onHeaderClick(headerClickEventArgs: DataTableHeaderClickEventArgs): void {
    this.allEventsData.push(`[COLUMN HEADER] ${headerClickEventArgs.column.title} is clicked`);
  }

  public onRowClick(clickEventArgs: DataTableRowClickEventArgs<any>): void {
    this.allEventsData.push(`[SINGLE CLICK] perform on row ID - ${clickEventArgs.row.item.id}`);
  }

  public onRowDoubleClick(doubleClickEventArgs: DataTableDoubleClickEventArgs<any>): void {
    this.allEventsData.push(`[DOUBLE CLICK] perform on row ID - ${doubleClickEventArgs.row.item.id}`);
  }

  public getAllEventsData(): string[] {
    if (this.allEventsData.length) {
      return this.allEventsData.slice().reverse();
    }
  }
}

Useful Events

All the available data table events can be detailed as follows. In here, the above Basic Usage example will separate into individual events and discuss in detail with live examples.

Column Bind

columnBind: EventEmitter<DataTableColumnComponent>

Triggers for each column before all other event configurations. As mentioned earlier, this is the first event which called before all the other events.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Column bind event is called for column - Gross Margin
Column bind event is called for column - Quantity
Column bind event is called for column - Revenue
Column bind event is called for column - Product Type
Column bind event is called for column - Product Line
Column bind event is called for column - Retailer Type
Column bind event is called for column - Order Method Type
Column bind event is called for column - ID

import { Component } from '@angular/core';

import { DataTableColumnComponent } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-column-bind-usage',
  templateUrl: './events-column-bind-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsColumnBindUsageComponent {
  public items: ExampleData[];

  public columnBindEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onColumnBind(dataTableColumnComponent: DataTableColumnComponent): void {
    this.columnBindEventData.push(`Column bind event is called for column - ${dataTableColumnComponent.title}`);
  }
}

Init

init: EventEmitter <DataTableComponent>

Data table initialization can be track using by binding a event to init property. below example and code snippet will demonstrate a sample usage.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Data table init event is called

import { Component } from '@angular/core';

import { DataTableComponent } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-init-usage',
  templateUrl: './events-init-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsInitUsageComponent {
  public items: ExampleData[];

  public dataTableInitData: string = null;

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onDataTableInit(dataTable: DataTableComponent): void {
    this.dataTableInitData = 'Data table init event is called';
  }
}

Data Bound

dataBound: EventEmitter<void>

Data bound property will trigger after completion of data binding. This event will be called right after the columnBind and init events.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Data bound event is called

import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-data-bound-usage',
  templateUrl: './events-data-bound-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsDataBoundUsageComponent {
  public items: ExampleData[];
  public dataBoundEventData: string = null;

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onDataBound(): void {
    this.dataBoundEventData = 'Data bound event is called';
  }
}

Row Bind

rowBind: EventEmitter<DataTableRow<any>>

For each table row this will trigger when binding data for the available rows. That is the only occasion this event will be fired. Refer following output. please note row bind event will be called after the columnBind, init & dataBound events.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Row bind event is called for row ID - 30
Row bind event is called for row ID - 25
Row bind event is called for row ID - 20
Row bind event is called for row ID - 15
Row bind event is called for row ID - 10

import { Component } from '@angular/core';

import { DataTableRow } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-row-bind-usage',
  templateUrl: './events-row-bind-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsRowBindUsageComponent {
  public items: ExampleData[];

  public rowBindEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onRowBind(dataRow: DataTableRow<ExampleData>): void {
    this.rowBindEventData.push(`Row bind event is called for row ID - ${dataRow.item.id}`);
  }
}

Cell Bind

cellBind: EventEmitter<DataTableCellBindEventArgs<any>>

For each table row cell this will trigger when binding cell data. That means after a each rowBind event, this event will be called again & again for all the available cells in a given row. That's why following output shows the same string (eg: cell bind event is called for row id => 10) 8 times per row.

In Pageable enabled pages, cell binding will perform on current table view only, for rest of paginated pages will only perform if user paginate into next available pages. for more details about table pagination, please refer Pagination section.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 30
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 25
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 20
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 15
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10
Cell bind event is called for row ID - 10

import { Component } from '@angular/core';

import { DataTableCellBindEventArgs } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-cell-bind-usage',
  templateUrl: './events-cell-bind-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsCellBindUsageComponent {
  public items: ExampleData[];

  public cellBindEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onCellBind(cellBindEventArgs: DataTableCellBindEventArgs<any>): void {
    this.cellBindEventData.push(`Cell bind event is called for row ID - ${cellBindEventArgs.row.item.id}`);
  }
}

Row Select Change

rowSelectChange: EventEmitter<any | any[]>

Triggers when row select state changes. To identify selected rows uniquely it is necessary to specify Select Track By property. Therefore, a unique value column name should be set as the value for this attribute. According to this example it is 'id'.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Select on any row check box to see the output

import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-row-select-change-usage',
  templateUrl: './events-row-select-change-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsRowSelectChangeUsageComponent {
  public items: ExampleData[];

  public rowSelectChangeEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onRowSelectChange(selectedData: ExampleData | ExampleData[]): void {
    this.rowSelectChangeEventData.push(JSON.stringify(selectedData));
  }
}

All Row Select Change

allRowSelectChange: EventEmitter<boolean>

This event is responsible to trigger when row select change is perform on all the rows or click on the select all checkbox on row select column. all row select change will emits all the selected row id's as an array if the rowSelectChange event is bind.

Please note by using select all checkbox will only checking all rows on current page. each paginated page views have separate select all check boxes.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Click on the row select all check box or select all checkboxes on current view one by one

import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-all-row-select-change-usage',
  templateUrl: './events-all-row-select-change-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsAllRowSelectChangeUsageComponent {
  public items: ExampleData[];

  public allRowSelectChangeEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onAllRowSelectChange(allRowSelectedChanged: boolean): void {
    this.allRowSelectChangeEventData.push(`Select All Rows Checkbox Status: ${allRowSelectedChanged}`);
  }
}

Row Click

rowClick: EventEmitter<DataTableRowClickEventArgs<any>>

This property can be uses to triggers user single click event on table specific data row.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Click on any row to see the output

import { Component } from '@angular/core';

import { DataTableRowClickEventArgs } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-row-click-usage',
  templateUrl: './events-row-click-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsRowClickUsageComponent {
  public items: ExampleData[];
  public rowClickEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onRowClick(clickEventArgs: DataTableRowClickEventArgs<any>): void {
    this.rowClickEventData.push(`Single click event perform on row ID - ${clickEventArgs.row.item.id}`);
  }
}

Row Double Click

rowDoubleClick: EventEmitter<DataTableDoubleClickEventArgs<any>>

This property can be uses to triggers user double click event on table specific data row.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Double click on any row to see the output

import { Component } from '@angular/core';

import { DataTableDoubleClickEventArgs } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-row-double-click-usage',
  templateUrl: './events-row-double-click-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsRowDoubleClickUsageComponent {
  public items: ExampleData[];
  public rowDoubleClickEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onRowDoubleClick(doubleClickEventArgs: DataTableDoubleClickEventArgs<any>): void {
    this.rowDoubleClickEventData.push(`Double click event perform on row ID - ${doubleClickEventArgs.row.item.id}`);
  }
}

Cell Click

cellClick: EventEmitter<DataTableCellClickEventArgs<any>>

This event can uses to triggers users clicked specific cell on data table. for sample demonstration refer the below example.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Click on any cell to see the output

import { Component } from '@angular/core';

import { DataTableCellClickEventArgs } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-cell-click-usage',
  templateUrl: './events-cell-click-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsCellClickUsageComponent {
  public items: ExampleData[];

  public cellClickEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onCellClick(cellClickEventArgs: DataTableCellClickEventArgs<any>): void {
    this.cellClickEventData.push(`Selected Column is ${cellClickEventArgs.column.title} & Row ID is - ${cellClickEventArgs.row.item.id}`);
  }
}

Header Click

headerClick: EventEmitter<DataTableHeaderClickEventArgs>

Header click can be uses to track user click event on data table column headers.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
Results: 1-5of10
/ 2

Click on any column header to see the output

import { Component } from '@angular/core';

import { DataTableHeaderClickEventArgs } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-header-click-usage',
  templateUrl: './events-header-click-usage.component.html',
  styleUrls: ['../../data-table-events.component.scss']
})
export class EventsHeaderClickUsageComponent {
  public items: ExampleData[];
  public headerClickEventData: string[] = [];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }

  public onHeaderClick(headerClickEventArgs: DataTableHeaderClickEventArgs): void {
    this.headerClickEventData.push(`${headerClickEventArgs.column.title} column header clicked`);
  }
}
Client-side Basic Data Binding
Server-side Basic Data Binding
Server-side Web Socket Data Binding
Themes
API Doc for Data Table Events