<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular 2 ag-Grid starter</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="styles.css">
<!-- Polyfills -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.17?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script>
var appLocation = '';
var boilerplatePath = '';
var systemJsMap = {"ag-grid-community":"https:\/\/unpkg.com\/ag-grid-community@19.1.2\/dist\/ag-grid-community.js","ag-grid-community\/main":"https:\/\/unpkg.com\/ag-grid-community@19.1.2\/dist\/ag-grid-community.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@19.1.2\/","ag-grid-react":"npm:ag-grid-react@19.1.2\/","ag-grid-angular":"npm:ag-grid-angular@19.1.2\/","ag-grid-vue":"npm:ag-grid-vue@19.1.2\/"};
</script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.ts').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading ag-Grid example…</my-app>
</body>
</html>
import { Component, ViewChild } from "@angular/core";
import "ag-grid-enterprise";
@Component({
selector: "my-app",
template: `<div style="height: 100%; padding-top: 30px; box-sizing: border-box;">
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
[rowData]="rowData"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
[components]="components"
[treeData]="true"
[animateRows]="true"
[enableFilter]="true"
[enableSorting]="true"
[enableColResize]="true"
[groupDefaultExpanded]="groupDefaultExpanded"
[getDataPath]="getDataPath"
[getRowNodeId]="getRowNodeId"
[autoGroupColumnDef]="autoGroupColumnDef"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<button (click)="addNewGroup()">Add New Group</button>
<button (click)="moveSelectedNodeToTarget(9)">Move Selected to 'stuff'</button>
<button (click)="removeSelected()">Remove Selected</button>
</div>`
})
export class AppComponent {
private gridApi;
private gridColumnApi;
private rowData: any[];
private columnDefs;
private rowData;
private components;
private groupDefaultExpanded;
private getDataPath;
private getRowNodeId;
private autoGroupColumnDef;
constructor() {
this.columnDefs = [
{
field: "dateModified",
comparator: function(d1, d2) {
return new Date(d1).getTime() < new Date(d2).getTime() ? -1 : 1;
}
},
{
field: "size",
aggFunc: "sum",
valueFormatter: function(params) {
return params.value ? Math.round(params.value * 10) / 10 + " MB" : "0 MB";
}
}
];
this.rowData = [
{
id: 1,
filePath: ["Documents"]
},
{
id: 2,
filePath: ["Documents", "txt"]
},
{
id: 3,
filePath: ["Documents", "txt"],
fileName : "notes.txt",
dateModified: "May 21 2017 01:50:00 PM",
size: 14.7
},
{
id: 4,
filePath: ["Documents", "pdf"]
},
{
id: 5,
filePath: ["Documents", "pdf"],
fileName : "book.pdf",
dateModified: "May 20 2017 01:50:00 PM",
size: 2.1
},
{
id: 6,
filePath: ["Documents", "pdf"],
fileName : "cv.pdf",
dateModified: "May 20 2016 11:50:00 PM",
size: 2.4
},
{
id: 7,
filePath: ["Documents", "xls"]
},
{
id: 8,
filePath: ["Documents", "xls"],
fileName: "accounts.xls",
dateModified: "Aug 12 2016 10:50:00 AM",
size: 4.3
},
{
id: 9,
filePath: ["Documents", "stuff"]
},
{
id: 10,
filePath: ["Documents", "stuff"],
fileName : "xyz.txt",
dateModified: "Jan 17 2016 08:03:00 PM",
size: 1.1
},
{
id: 11,
filePath: ["Music", "mp3", "pop"],
dateModified: "Sep 11 2016 08:03:00 PM",
size: 14.3
},
{
id: 12,
filePath: ["temp.txt"],
dateModified: "Aug 12 2016 10:50:00 PM",
size: 101
},
{
id: 13,
filePath: ["Music", "mp3", "pop"],
fileName : "theme.mp3",
dateModified: "Aug 12 2016 10:50:00 PM",
size: 101
},
{
id: 14,
filePath: ["Music", "mp3", "jazz"],
dateModified: "Aug 12 2016 10:50:00 PM",
size: 101
},
{
id: 15,
filePath: ["Documents", "txt"],
fileName: "notes.txt",
dateModified: "May 21 2017 01:50:00 PM",
size: 14.7
}
];
this.components = { fileCellRenderer: getFileCellRenderer() };
this.groupDefaultExpanded = -1;
this.getDataPath = function(data) {
let res = data.filePath;
if (data.fileName) {
//for leave nodes we add the id to make them unique
res.push(data.fileName + data.id);
}
return res;
};
this.getRowNodeId = function(data) {
return data.id;
};
this.autoGroupColumnDef = {
headerName: "Files",
width: 250,
cellRendererParams: {
checkbox: true,
suppressCount: true,
innerRenderer: "fileCellRenderer"
}
};
}
addNewGroup() {
var newGroupData = [
{
id: getNextId(),
filePath: ["Music", "wav", "hit_" + new Date().getTime() + ".wav"],
dateModified: "Aug 23 2017 11:52:00 PM",
size: 58.9
}
];
this.gridApi.updateRowData({ add: newGroupData });
}
removeSelected() {
var selectedNode = this.gridApi.getSelectedNodes()[0];
if (!selectedNode) {
console.warn("No nodes selected!");
return;
}
this.gridApi.updateRowData({ remove: getRowsToRemove(selectedNode) });
}
moveSelectedNodeToTarget(targetRowId) {
var selectedNode = this.gridApi.getSelectedNodes()[0];
if (!selectedNode) {
console.warn("No nodes selected!");
return;
}
var targetNode = this.gridApi.getRowNode(targetRowId);
var invalidMove = selectedNode.key === targetNode.key || isSelectionParentOfTarget(selectedNode, targetNode);
if (invalidMove) {
console.warn("Invalid selection - must not be parent or same as target!");
return;
}
var rowsToUpdate = getRowsToUpdate(selectedNode, targetNode.data.filePath);
this.gridApi.updateRowData({ update: rowsToUpdate });
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
}
}
function getNextId() {
if (!window.nextId) {
window.nextId = 13;
} else {
window.nextId++;
}
return window.nextId;
}
function getFileCellRenderer() {
function FileCellRenderer() {}
FileCellRenderer.prototype.init = function(params) {
var tempDiv = document.createElement("div");
var value = (params.data && params.data.fileName ?
params.data.fileName : params.value);
var icon = getFileIcon(value);
tempDiv.innerHTML = icon
? '<span><i class="' + icon + '"></i>' + '<span class="filename"></span>' + value + "</span>"
: value;
this.eGui = tempDiv.firstChild;
};
FileCellRenderer.prototype.getGui = function() {
return this.eGui;
};
return FileCellRenderer;
}
function getRowsToRemove(node) {
var res = [];
for (var i = 0; i < node.childrenAfterGroup.length; i++) {
res = res.concat(getRowsToRemove(node.childrenAfterGroup[i]));
}
return node.data ? res.concat([node.data]) : res;
}
function isSelectionParentOfTarget(selectedNode, targetNode) {
var children = selectedNode.childrenAfterGroup;
for (var i = 0; i < children.length; i++) {
if (targetNode && children[i].key === targetNode.key) return true;
isSelectionParentOfTarget(children[i], targetNode);
}
return false;
}
function getRowsToUpdate(node, parentPath) {
var res = [];
var newPath = parentPath.concat([node.key]);
if (node.data) {
node.data.filePath = newPath;
}
for (var i = 0; i < node.childrenAfterGroup.length; i++) {
var updatedChildRowData = getRowsToUpdate(node.childrenAfterGroup[i], newPath);
res = res.concat(updatedChildRowData);
}
return node.data ? res.concat([node.data]) : res;
}
function getFileIcon(filename) {
return filename.endsWith(".mp3") || filename.endsWith(".wav")
? "fa fa-file-audio-o"
: filename.endsWith(".xls")
? "fa fa-file-excel-o"
: filename.endsWith(".txt") ? "fa fa fa-file-o" : filename.endsWith(".pdf") ? "fa fa-file-pdf-o" : "fa fa-folder";
}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms"; // <-- NgModel lives here
// HttpClient
import { HttpClientModule } from "@angular/common/http";
// ag-grid
import { AgGridModule } from "ag-grid-angular";
import { AppComponent } from "./app.component";
@NgModule({
imports: [
BrowserModule,
FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
HttpClientModule,
AgGridModule.withComponents([])
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
.fa-folder {
color: darkorange;
}
.fa-file-pdf-o {
color: red;
}
.fa-file-excel-o {
color: green;
}
.fa-file-audio-o {
color: blue;
}
.filename {
padding:5px;
color: black;
font-size: 16px
}
.fa-folder {
color: darkorange;
}
.fa-file-pdf-o {
color: red;
}
.fa-file-excel-o {
color: green;
}
.fa-file-audio-o {
color: blue;
}
.filename {
padding: 5px;
color: black;
font-size: 16px;
}
// Angular entry point file
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from 'app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
module.exports.translate = function(load){
if (load.source.indexOf('moduleId') != -1) return load;
var url = document.createElement('a');
url.href = load.address;
var basePathParts = url.pathname.split('/');
basePathParts.pop();
var basePath = basePathParts.join('/');
var baseHref = document.createElement('a');
baseHref.href = this.baseURL;
baseHref = baseHref.pathname;
if (!baseHref.startsWith('/base/')) { // it is not karma
basePath = basePath.replace(baseHref, '');
}
load.source = load.source
.replace(templateUrlRegex, function(match, quote, url){
var resolvedUrl = url;
if (url.startsWith('.')) {
resolvedUrl = basePath + url.substr(1);
}
return 'templateUrl: "' + resolvedUrl + '"';
})
.replace(stylesRegex, function(match, relativeUrls) {
var urls = [];
while ((match = stringRegex.exec(relativeUrls)) !== null) {
if (match[2].startsWith('.')) {
urls.push('"' + basePath + match[2].substr(1) + '"');
} else {
urls.push('"' + match[2] + '"');
}
}
return "styleUrls: [" + urls.join(', ') + "]";
});
return load;
};
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function(global) {
var ANGULAR_VERSION = "5.1.3";
var ANGULAR_CDK_VERSION = "5.2.5";
var ANGULAR_MATERIAL_VERSION = "5.2.5";
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: "ts",
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
target: "es5",
module: "system", //gets rid of console warning
moduleResolution: "node",
sourceMap: true,
emitDecoratorMetadata: true,
experimentalDecorators: true,
lib: ["es2015", "dom"],
noImplicitAny: true,
suppressImplicitAnyIndexErrors: true
},
meta: {
typescript: {
exports: "ts"
}
},
paths: {
// paths serve as alias
"npm:": "https://unpkg.com/"
},
// RxJS makes a lot of requests to unpkg. This guy addressed it:
// https://github.com/OasisDigital/rxjs-system-bundle.
bundles: {
"npm:rxjs-system-bundle@5.5.5/Rx.system.js": [
"rxjs",
"rxjs/*",
"rxjs/operator/*",
"rxjs/operators/*",
"rxjs/observable/*",
"rxjs/scheduler/*",
"rxjs/symbol/*",
"rxjs/add/operator/*",
"rxjs/add/observable/*",
"rxjs/util/*"
]
},
// map tells the System loader where to look for things
map: Object.assign(
{
// angular bundles
"@angular/animations": "npm:@angular/animations@" + ANGULAR_VERSION + "/bundles/animations.umd.js",
"@angular/animations/browser": "npm:@angular/animations@" + ANGULAR_VERSION + "/bundles/animations-browser.umd.js",
"@angular/core": "npm:@angular/core@" + ANGULAR_VERSION + "/bundles/core.umd.js",
"@angular/common": "npm:@angular/common@" + ANGULAR_VERSION + "/bundles/common.umd.js",
"@angular/common/http": "npm:@angular/common@" + ANGULAR_VERSION + "/bundles/common-http.umd.js",
"@angular/compiler": "npm:@angular/compiler@" + ANGULAR_VERSION + "/bundles/compiler.umd.js",
"@angular/platform-browser": "npm:@angular/platform-browser@" + ANGULAR_VERSION + "/bundles/platform-browser.umd.js",
"@angular/platform-browser/animations": "npm:@angular/platform-browser@" + ANGULAR_VERSION + "/bundles/platform-browser-animations.umd.js",
"@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@" + ANGULAR_VERSION + "/bundles/platform-browser-dynamic.umd.js",
"@angular/http": "npm:@angular/http@" + ANGULAR_VERSION + "/bundles/http.umd.js",
"@angular/router": "npm:@angular/router@" + ANGULAR_VERSION + "/bundles/router.umd.js",
"@angular/router/upgrade": "npm:@angular/router@" + ANGULAR_VERSION + "/bundles/router-upgrade.umd.js",
"@angular/forms": "npm:@angular/forms@" + ANGULAR_VERSION + "/bundles/forms.umd.js",
"@angular/upgrade": "npm:@angular/upgrade@" + ANGULAR_VERSION + "/bundles/upgrade.umd.js",
"@angular/upgrade/static": "npm:@angular/upgrade@" + ANGULAR_VERSION + "/bundles/upgrade-static.umd.js",
"angular-in-memory-web-api": "npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js",
// material design
"@angular/material": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/bundles/material.umd.js",
"@angular/cdk/platform": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-platform.umd.js",
"@angular/cdk/bidi": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-bidi.umd.js",
"@angular/cdk/coercion": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-coercion.umd.js",
"@angular/cdk/keycodes": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-keycodes.umd.js",
"@angular/cdk/a11y": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-a11y.umd.js",
"@angular/cdk/overlay": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-overlay.umd.js",
"@angular/cdk/portal": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-portal.umd.js",
"@angular/cdk/observers": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-observers.umd.js",
"@angular/cdk/collections": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-collections.umd.js",
"@angular/cdk/accordion": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-accordion.umd.js",
"@angular/cdk/scrolling": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-scrolling.umd.js",
"@angular/cdk/layout": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-layout.umd.js",
"@angular/cdk/table": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-table.umd.js",
"@angular/cdk/text-field": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-text-field.umd.js",
"@angular/cdk/tree": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-tree.umd.js",
"@angular/cdk/stepper": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/bundles/cdk-stepper.umd.js",
// ngx bootstrap
"ngx-bootstrap": "npm:ngx-bootstrap@2.0.0-rc.0",
// ng2 typeahead
"ng2-typeahead": "npm:ng2-typeahead@1.2.0",
ts: "npm:plugin-typescript@5.2.7/lib/plugin.js",
tslib: "npm:tslib@1.7.1/tslib.js",
typescript: "npm:typescript@2.3.2/lib/typescript.js",
// for some of the examples
lodash: "npm:lodash@4.17.4/lodash.js",
// our app is within the app folder, appLocation comes from index.html
app: appLocation + "app",
rxjs: "npm:rxjs@6.1.0/bundles/rxjs.umd.min.js"
},
systemJsMap
),
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: "./main.ts",
defaultExtension: "ts",
meta: {
"./*.ts": {
loader: boilerplatePath + "systemjs-angular-loader.js"
}
}
},
"ag-grid-angular": {
main: "./main.js",
defaultExtension: "js"
},
"ag-grid-enterprise": {
main: "./main.js",
defaultExtension: "js"
},
rxjs: {
defaultExtension: false
}
}
});
})(this);