<!DOCTYPE html>
<html>
<head>
<title>ag-Grid Using Angular Master/Detail Components</title>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- ag-grid CSS -->
<link href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css" rel="stylesheet"/>
<link href="https://unpkg.com/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet"/>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
map: {
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core@2.4.8/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@2.4.8/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@2.4.8/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@2.4.8/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.8/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router@2.4.8/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@2.4.8/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs@5.0.0',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.1.1/lib/typescript.js',
// ag libraries
'ag-grid-angular': 'npm:ag-grid-angular',
'ag-grid': 'npm:ag-grid'
},
packages: {
app: {
main: './boot.ts',
defaultExtension: 'ts'
},
'ag-grid': {
main: 'main.js'
}
}
}
);
if (!global.noBootstrap) {
bootstrap();
}
// Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
function bootstrap() {
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/boot.ts'), System.newModule({}));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('@angular/platform-browser-dynamic'),
System.import('app/app.module')
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function (err) {
console.error(err);
});
}
})(this);
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent { }
<ag-masterdetail-master></ag-masterdetail-master>
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {FormsModule} from "@angular/forms";
// ag-grid
import {AgGridModule} from "ag-grid-angular/main";
// application
import {AppComponent} from "./app.component";
// master detail
import {MasterComponent} from "./master-detail-example/masterdetail-master.component";
import {DetailPanelComponent} from "./master-detail-example/detail-panel.component";
@NgModule({
imports: [
BrowserModule,
FormsModule,
AgGridModule.withComponents(
[
DetailPanelComponent
])
],
declarations: [
AppComponent,
MasterComponent,
DetailPanelComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
import {Component, AfterViewInit} from "@angular/core";
import {GridOptions} from "ag-grid/main";
import {ICellRendererAngularComp} from "ag-grid-angular/main";
@Component({
moduleId: module.id,
selector: 'ag-full-width-grid',
templateUrl: 'detail-panel.component.html',
styleUrls: ['detail-panel.component.css'],
})
export class DetailPanelComponent implements ICellRendererAngularComp,AfterViewInit {
public gridOptions: GridOptions;
public parentRecord: any;
constructor() {
this.gridOptions = <GridOptions>{};
this.gridOptions.enableSorting = true;
this.gridOptions.enableFilter = true;
this.gridOptions.enableColResize = true;
this.gridOptions.columnDefs = this.createColumnDefs();
}
agInit(params: any): void {
this.parentRecord = params.node.parent.data;
}
// Sometimes the gridReady event can fire before the angular component is ready to receive it, so in an angular
// environment its safer to on you cannot safely rely on AfterViewInit instead before using the API
ngAfterViewInit() {
this.gridOptions.api.setRowData(this.parentRecord.callRecords);
this.gridOptions.api.sizeColumnsToFit();
}
onSearchTextChange(newData: string) {
this.gridOptions.api.setQuickFilter(newData);
}
private createColumnDefs() {
return [{headerName: 'Call ID', field: 'callId', cellClass: 'call-record-cell'},
{headerName: 'Direction', field: 'direction', cellClass: 'call-record-cell'},
{headerName: 'Number', field: 'number', cellClass: 'call-record-cell'},
{
headerName: 'Duration',
field: 'duration',
cellClass: 'call-record-cell',
cellFormatter: this.secondCellFormatter
},
{headerName: 'Switch', field: 'switchCode', cellClass: 'call-record-cell'}];
}
private secondCellFormatter(params) {
return params.value.toLocaleString() + 's';
};
// if we don't do this, then the mouse wheel will be picked up by the main
// grid and scroll the main grid and not this component. this ensures that
// the wheel move is only picked up by the text field
consumeMouseWheelOnDetailGrid($event) {
$event.stopPropagation();
}
onButtonClick() {
window.alert('Sample button pressed!!');
}
}
import {Component,AfterViewInit} from "@angular/core";
import {GridOptions} from "ag-grid/main";
import {DetailPanelComponent} from "./detail-panel.component";
@Component({
moduleId: module.id,
selector: 'ag-masterdetail-master',
templateUrl: 'masterdetail-master.component.html'
})
export class MasterComponent implements AfterViewInit{
public gridOptions: GridOptions;
constructor() {
this.gridOptions = <GridOptions>{};
this.gridOptions.rowData = this.createRowData();
this.gridOptions.columnDefs = this.createColumnDefs();
}
private createColumnDefs() {
return [
{
headerName: 'Name', field: 'name',
// left column is going to act as group column, with the expand / contract controls
cellRenderer: 'group',
// we don't want the child count - it would be one each time anyway as each parent
// not has exactly one child node
cellRendererParams: {suppressCount: true}
},
{headerName: 'Account', field: 'account'},
{headerName: 'Calls', field: 'totalCalls'},
{headerName: 'Minutes', field: 'totalMinutes', cellFormatter: this.minuteCellFormatter}
];
}
public isFullWidthCell(rowNode) {
return rowNode.level === 1;
}
// Sometimes the gridReady event can fire before the angular component is ready to receive it, so in an angular
// environment its safer to on you cannot safely rely on AfterViewInit instead before using the API
ngAfterViewInit() {
this.gridOptions.api.sizeColumnsToFit();
}
public getFullWidthCellRenderer() {
return DetailPanelComponent;
}
public getRowHeight(params) {
var rowIsDetailRow = params.node.level === 1;
// return 100 when detail row, otherwise return 25
return rowIsDetailRow ? 200 : 25;
}
public getNodeChildDetails(record) {
if (record.callRecords) {
return {
group: true,
// the key is used by the default group cellRenderer
key: record.name,
// provide ag-Grid with the children of this group
children: [record.callRecords],
// for demo, expand the third row by default
expanded: record.account === 177002
};
} else {
return null;
}
}
private createRowData() {
let rowData: any[] = [];
for (let i = 0; i < 20; i++) {
let firstName = this.firstnames[Math.floor(Math.random() * this.firstnames.length)];
let lastName = this.lastnames[Math.floor(Math.random() * this.lastnames.length)];
let image = this.images[i % this.images.length];
let totalDuration = 0;
let callRecords = [];
// call count is random number between 20 and 120
let callCount = Math.floor(Math.random() * 100) + 20;
for (let j = 0; j < callCount; j++) {
// duration is random number between 20 and 120
let callDuration = Math.floor(Math.random() * 100) + 20;
let callRecord = {
callId: this.callIdSequence++,
duration: callDuration,
switchCode: 'SW' + Math.floor(Math.random() * 10),
// 50% chance of in vs out
direction: (Math.random() > .5) ? 'In' : 'Out',
// made up number
number: '(0' + Math.floor(Math.random() * 10) + ') ' + Math.floor(Math.random() * 100000000)
};
callRecords.push(callRecord);
totalDuration += callDuration;
}
let record = {
name: firstName + ' ' + lastName,
account: i + 177000,
totalCalls: callCount,
image: image,
// convert from seconds to minutes
totalMinutes: totalDuration / 60,
callRecords: callRecords
};
rowData.push(record);
}
return rowData;
}
private minuteCellFormatter(params) {
return params.value.toLocaleString() + 'm';
};
// a list of names we pick from when generating data
private firstnames: string[] = ['Sophia', 'Emma', 'Olivia', 'Isabella', 'Mia', 'Ava', 'Lily', 'Zoe', 'Emily', 'Chloe', 'Layla', 'Madison', 'Madelyn', 'Abigail', 'Aubrey', 'Charlotte', 'Amelia', 'Ella', 'Kaylee', 'Avery', 'Aaliyah', 'Hailey', 'Hannah', 'Addison', 'Riley', 'Harper', 'Aria', 'Arianna', 'Mackenzie', 'Lila', 'Evelyn', 'Adalyn', 'Grace', 'Brooklyn', 'Ellie', 'Anna', 'Kaitlyn', 'Isabelle', 'Sophie', 'Scarlett', 'Natalie', 'Leah', 'Sarah', 'Nora', 'Mila', 'Elizabeth', 'Lillian', 'Kylie', 'Audrey', 'Lucy', 'Maya'];
private lastnames: string[] = ['Smith', 'Jones', 'Williams', 'Taylor', 'Brown', 'Davies', 'Evans', 'Wilson', 'Thomas', 'Johnson'];
private images: string[] = ['niall', 'sean', 'alberto', 'statue', 'horse'];
// each call gets a unique id, nothing to do with the grid, just help make the sample
// data more realistic
private callIdSequence: number = 555;
}
<div style="width: 800px;">
<h1>Master-Detail Example</h1>
<ag-grid-angular #agGrid
style="width: 100%; height: 350px;"
class="ag-fresh"
[gridOptions]="gridOptions"
[isFullWidthCell]="isFullWidthCell"
[getRowHeight]="getRowHeight"
[getNodeChildDetails]="getNodeChildDetails"
[fullWidthCellRendererFramework]="getFullWidthCellRenderer()"
enableSorting
enableColResize
suppressMenuFilterPanel>
</ag-grid-angular>
</div>
<div class="full-width-panel">
<div class="full-width-details">
<div class="full-width-detail"><img width="120px" src="https://www.ag-grid.com/images/{{parentRecord.image}}.png"/></div>
<div class="full-width-detail"><b>Name: </b> {{parentRecord.name}}</div>
<div class="full-width-detail"><b>Account: </b> {{parentRecord.account}}</div>
</div>
<ag-grid-angular #agDetailGrid
class="full-width-grid"
[gridOptions]="gridOptions"
enableSorting
enableFilter
enableColResize
(mousewheel)="consumeMouseWheelOnDetailGrid($event)"
(DOMMouseScroll)="consumeMouseWheelOnDetailGrid($event)">
</ag-grid-angular>
<div class="full-width-grid-toolbar">
<img class="full-width-phone-icon" src="https://www.ag-grid.com/images/phone.png"/>
<button (click)="onButtonClick()"><img src="https://www.ag-grid.com/images/fire.png"/></button>
<button (click)="onButtonClick()"><img src="https://www.ag-grid.com/images/frost.png"/></button>
<button (click)="onButtonClick()"><img src="https://www.ag-grid.com/images/sun.png"/></button>
<input class="full-width-search" #box (keyup)="onSearchTextChange(box.value)" placeholder="Search..."/>
</div>
</div>
.full-width-panel {
position: relative;
background: #fafafa;
height: 100%;
width: 100%;
padding: 5px;
box-sizing: border-box;
border-left: 2px solid grey;
border-bottom: 2px solid lightgray;
border-right: 2px solid lightgray;
}
.call-record-cell {
text-align: right;
}
.full-width-detail {
padding-top: 4px;
}
.full-width-details {
float: left;
padding: 5px;
margin: 5px;
width: 150px;
}
.full-width-grid {
margin-left: 150px;
padding-top: 25px;
box-sizing: border-box;
display: block;
height: 100%;
}
.full-width-grid-toolbar {
top: 4px;
left: 30px;
margin-left: 150px;
display: block;
position: absolute;
}
.full-width-phone-icon {
padding-right: 10px;
}
.full-width-search {
border: 1px solid #eee;
margin-left: 10px;
}