<!DOCTYPE html>
<html>
<head>
<title>ag-Grid Angular Rich Grid Example</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"/>
<!-- Example uses font awesome icons -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.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',
'ag-grid-enterprise': 'npm:ag-grid-enterprise'
},
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 { }
<rich-grid></rich-grid>
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";
// rich grid
import {RichGridComponent} from "./rich-grid-example/rich-grid.component";
@NgModule({
imports: [
BrowserModule,
FormsModule,
AgGridModule.withComponents(
[])
],
declarations: [
AppComponent,
RichGridComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
export default class RefData {
static IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows'];
static IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows'];
static firstNames = ["Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella",
"Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby",
"Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla"];
static lastNames = ["Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell",
"Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane",
"Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner",
"Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane",
"Keating", "Keegan", "Kingston", "Kobe"];
static DOBs = [
new Date(2000, 0, 1 ),
new Date(2001, 1, 2 ),
new Date(2002, 2, 3 ),
new Date(2003, 3, 4 ),
new Date(2004, 4, 5 ),
new Date(2005, 5, 6 ),
new Date(2006, 6, 7 ),
new Date(2007, 7, 8 ),
new Date(2008, 8, 9 ),
new Date(2009, 9, 10 ),
new Date(2010, 10, 11 ),
new Date(2011, 11, 12 )
];
static COUNTRY_CODES = {
Ireland: "ie",
Spain: "es",
"United Kingdom": "gb",
France: "fr",
Germany: "de",
Sweden: "se",
Italy: "it",
Greece: "gr",
Iceland: "is",
Portugal: "pt",
Malta: "mt",
Norway: "no",
Brazil: "br",
Argentina: "ar",
Colombia: "co",
Peru: "pe",
Venezuela: "ve",
Uruguay: "uy"
};
static countries = [
{country: "Ireland", continent: "Europe", language: "English"},
{country: "Spain", continent: "Europe", language: "Spanish"},
{country: "United Kingdom", continent: "Europe", language: "English"},
{country: "France", continent: "Europe", language: "French"},
{country: "Germany", continent: "Europe", language: "(other)"},
{country: "Sweden", continent: "Europe", language: "(other)"},
{country: "Norway", continent: "Europe", language: "(other)"},
{country: "Italy", continent: "Europe", language: "(other)"},
{country: "Greece", continent: "Europe", language: "(other)"},
{country: "Iceland", continent: "Europe", language: "(other)"},
{country: "Portugal", continent: "Europe", language: "Portuguese"},
{country: "Malta", continent: "Europe", language: "(other)"},
{country: "Brazil", continent: "South America", language: "Portuguese"},
{country: "Argentina", continent: "South America", language: "Spanish"},
{country: "Colombia", continent: "South America", language: "Spanish"},
{country: "Peru", continent: "South America", language: "Spanish"},
{country: "Venezuela", continent: "South America", language: "Spanish"},
{country: "Uruguay", continent: "South America", language: "Spanish"}
];
static addresses = [
'1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763',
'3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215',
'3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186',
'2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634',
'2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597',
'6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911',
'2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959',
'7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160',
'3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609',
'4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673',
'5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245',
'8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767',
'2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206',
'7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348',
'874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207',
'8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213',
'9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161',
'3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526',
'3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671',
'1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310',
'1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883',
'9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192',
'7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838',
'1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730',
'126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956',
'6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257',
'960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219',
'6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427',
'2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355',
'5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225',
'5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706',
'5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596',
'7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360',
'8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859',
'5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322',
'6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239',
'7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092',
'9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973',
'3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349',
'4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138',
'6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063',
'9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024',
'6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288',
'237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157',
'446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553',
'2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445',
'365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958',
'1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888',
'6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018',
'7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433'];
}
.toolbar button {
margin: 2px; padding: 0;
}
<div style="width: 100%;">
<h1>Rich Grid Example</h1>
<div style="padding: 4px;">
<div style="float: right;">
<input (keyup)="onQuickFilterChanged($event)" type="text" id="quickFilterInput" placeholder="Type text to filter..."/>
<button [disabled]="!showGrid" (click)="showGrid=false">Destroy Grid</button>
<button [disabled]="showGrid" (click)="showGrid=true">Create Grid</button>
</div>
<div>
<b>Employees Skills and Contact Details</b>
{{rowCount}}
</div>
</div>
<div style="clear: both;"></div>
<div *ngIf="showGrid">
<!-- Because we are using the Angular ID (ie #ag-grid marker), we have to have all the items that use
that marker inside the same ng-if as the grid -->
<div style="padding: 4px;" class="toolbar">
<span>
Grid API:
<button (click)="agGrid.api.selectAll()">Select All</button>
<button (click)="agGrid.api.deselectAll()">Clear Selection</button>
</span>
<span style="margin-left: 20px;">
Column API:
<button (click)="agGrid.columnApi.setColumnVisible('country', false)">Hide Country Column</button>
<button (click)="agGrid.columnApi.setColumnVisible('country', true)">Show Country Column</button>
</span>
</div>
<div style="clear: both;"></div>
<div style="padding: 4px;" class="toolbar">
<label>
<input type="checkbox" (change)="showToolPanel=$event.target.checked"/>
Show Tool Panel
</label>
<button (click)="createRowData()">Refresh Data</button>
</div>
<div style="clear: both;"></div>
<ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[showToolPanel]="showToolPanel"
[rowData]="rowData"
enableColResize
enableSorting
enableFilter
groupHeaders
suppressRowClickSelection
debug
rowHeight="22"
rowSelection="multiple"
(modelUpdated)="onModelUpdated()"
(cellClicked)="onCellClicked($event)"
(cellDoubleClicked)="onCellDoubleClicked($event)"
(cellContextMenu)="onCellContextMenu($event)"
(cellValueChanged)="onCellValueChanged($event)"
(cellFocused)="onCellFocused($event)"
(rowSelected)="onRowSelected($event)"
(selectionChanged)="onSelectionChanged()"
(beforeFilterChanged)="onBeforeFilterChanged()"
(afterFilterChanged)="onAfterFilterChanged()"
(filterModified)="onFilterModified()"
(beforeSortChanged)="onBeforeSortChanged()"
(afterSortChanged)="onAfterSortChanged()"
(virtualRowRemoved)="onVirtualRowRemoved($event)"
(rowClicked)="onRowClicked($event)"
(gridReady)="onReady($event)"
(gridSizeChanged)="onGridSizeChanged($event)"
(columnEverythingChanged)="onColumnEvent($event)"
(columnRowGroupChanged)="onColumnEvent($event)"
(columnValueChanged)="onColumnEvent($event)"
(columnMoved)="onColumnEvent($event)"
(columnVisible)="onColumnEvent($event)"
(columnGroupOpened)="onColumnEvent($event)"
(columnResized)="onColumnEvent($event)"
(columnPinnedCountChanged)="onColumnEvent($event)">
</ag-grid-angular>
</div>
</div>
import {Component, ViewEncapsulation} from "@angular/core";
import {GridOptions} from "ag-grid/main";
import RefData from '../data/refData';
// only import this if you are using the ag-Grid-Enterprise
import 'ag-grid-enterprise/main';
@Component({
moduleId: module.id,
selector: 'rich-grid',
templateUrl: 'rich-grid.component.html',
styleUrls: ['rich-grid.css'],
encapsulation: ViewEncapsulation.None
})
export class RichGridComponent {
private gridOptions:GridOptions;
public showGrid:boolean;
public rowData:any[];
private columnDefs:any[];
public rowCount:string;
constructor() {
// we pass an empty gridOptions in, so we can grab the api out
this.gridOptions = <GridOptions>{
pivotMode:true,
showToolPanel:true,
localeText: {
valueColumnsEmptyMessage: 'VALUE COLUMNS EMPTY',
pivotColumnsEmptyMessage: 'PIVOT COLUMNS EMPTY',
rowGroupColumnsEmptyMessage: 'ROW GROUP COLUMNS EMPTY',
}
};
this.createRowData();
this.createColumnDefs();
this.showGrid = true;
}
private createRowData() {
var rowData:any[] = [];
for (var i = 0; i < 10; i++) {
var countryData = RefData.countries[i % RefData.countries.length];
rowData.push({
name: RefData.firstNames[i % RefData.firstNames.length] + ' ' + RefData.lastNames[i % RefData.lastNames.length],
address: RefData.addresses[i % RefData.addresses.length],
years: Math.round(Math.random() * 100),
proficiency: Math.round(Math.random() * 100),
country: countryData.country,
continent: countryData.continent,
language: countryData.language,
mobile: createRandomPhoneNumber(),
landline: createRandomPhoneNumber()
});
}
this.rowData = rowData;
}
private createColumnDefs() {
this.columnDefs = [
{
headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
suppressMenu: true, pinned: true
},
{
headerName: "Name", field: "name",
enablePivot:true,
enableRowGroup:true
},
{
headerName: "Country", field: "country", width: 150,
enablePivot:true,
enableRowGroup:true
},
{
headerName: "Proficiency",
field: "proficiency",
//enablePivot:true,
//enableRowGroup:true,
width: 120
}
];
}
private calculateRowCount() {
if (this.gridOptions.api && this.rowData) {
var model = this.gridOptions.api.getModel();
var totalRows = this.rowData.length;
var processedRows = model.getRowCount();
this.rowCount = processedRows.toLocaleString() + ' / ' + totalRows.toLocaleString();
}
}
private onModelUpdated() {
console.log('onModelUpdated');
this.calculateRowCount();
}
private onReady() {
console.log('onReady');
this.calculateRowCount();
}
private onCellClicked($event) {
console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
}
private onCellValueChanged($event) {
console.log('onCellValueChanged: ' + $event.oldValue + ' to ' + $event.newValue);
}
private onCellDoubleClicked($event) {
console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
}
private onCellContextMenu($event) {
console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field);
}
private onCellFocused($event) {
console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')');
}
private onRowSelected($event) {
// taking out, as when we 'select all', it prints to much to the console!!
// console.log('onRowSelected: ' + $event.node.data.name);
}
private onSelectionChanged() {
console.log('selectionChanged');
}
private onBeforeFilterChanged() {
console.log('beforeFilterChanged');
}
private onAfterFilterChanged() {
console.log('afterFilterChanged');
}
private onFilterModified() {
console.log('onFilterModified');
}
private onBeforeSortChanged() {
console.log('onBeforeSortChanged');
}
private onAfterSortChanged() {
console.log('onAfterSortChanged');
}
private onVirtualRowRemoved($event) {
// because this event gets fired LOTS of times, we don't print it to the
// console. if you want to see it, just uncomment out this line
// console.log('onVirtualRowRemoved: ' + $event.rowIndex);
}
private onRowClicked($event) {
console.log('onRowClicked: ' + $event.node.data.name);
}
public onQuickFilterChanged($event) {
this.gridOptions.api.setQuickFilter($event.target.value);
}
// here we use one generic event to handle all the column type events.
// the method just prints the event name
private onColumnEvent($event) {
console.log('onColumnEvent: ' + $event);
}
private onGridSizeChanged($event){
console.log("Workd");
this.gridOptions.api.sizeColumnsToFit();
}
}
function createRandomPhoneNumber() {
var result = '+';
for (var i = 0; i < 12; i++) {
result += Math.round(Math.random() * 10);
if (i === 2 || i === 5 || i === 8) {
result += ' ';
}
}
return result;
}
//Utility function used to pad the date formatting.
function pad(num, totalStringSize) {
let asString = num + "";
while (asString.length < totalStringSize) asString = "0" + asString;
return asString;
}