<!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,ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
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, ViewEncapsulation} from "@angular/core";
import {GridOptions} from "ag-grid/main";
import {ICellRendererAngularComp} from "ag-grid-angular/main";
@Component({
encapsulation: ViewEncapsulation.None,
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.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.childrens);
// this.gridOptions.api.sizeColumnsToFit();
}
private createColumnDefs() {
return [
{
"headerName": "Total",
"field": "total",
},
{
"headerName": "APR 2016",
"field": "fy_m1"
},
{
"headerName": "May 2016",
"field": "fy_m2"
}
];
}
// 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();
}
}
import {Component,AfterViewInit, ViewEncapsulation} from "@angular/core";
import {GridOptions} from "ag-grid/main";
import {DetailPanelComponent} from "./detail-panel.component";
@Component({
encapsulation: ViewEncapsulation.None,
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": "Item",
"field": "label",
"cellRenderer": "group",
"cellRendererParams": {
"suppressCount": true
}
},
{
"headerName": "Total",
"field": "total"
},
{
"headerName": "Apr 2016",
"field": "fy_m1"
},
{
"headerName": "May 2016",
"field": "fy_m2"
}
];
}
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) {
console.info(record);
if (record.childrens) {
return {
group: true,
// the key is used by the default group cellRenderer
key: record.label,
// provide ag-Grid with the children of this group
children: [record.childrens],
// for demo, expand the third row by default
expanded: true
};
} else {
return null;
}
}
private createRowData() {
return [
{
"label": "Kylie Williams",
"total": 177000,
"fy_m1": 27098,
"fy_m2": 23543,
"childrens": [
{
"total": 177000,
"fy_m1": 27098,
"fy_m2": 23543
}
]
}
];
}
}
<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()">
</ag-grid-angular>
</div>
<div class="full-width-panel">
<ag-grid-angular #agDetailGrid
class="full-width-grid"
[gridOptions]="gridOptions"
(mousewheel)="consumeMouseWheelOnDetailGrid($event)"
(DOMMouseScroll)="consumeMouseWheelOnDetailGrid($event)">
</ag-grid-angular>
</div>
.full-width-panel {
position: relative;
background: #fafafa;
height: 100%;
width: 100%;
box-sizing: border-box;
}
.full-width-grid {
box-sizing: border-box;
display: block;
height: 100%;
}
.full-width-panel .ag-root {
border: 0;
}