<!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="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":"https:\/\/unpkg.com\/ag-grid@17.0.0\/dist\/ag-grid.js","ag-grid\/main":"https:\/\/unpkg.com\/ag-grid@17.0.0\/dist\/ag-grid.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@17.0.0\/","ag-grid-react":"npm:ag-grid-react@17.0.0\/","ag-grid-angular":"npm:ag-grid-angular@17.0.0\/","ag-grid-vue":"npm:ag-grid-vue@17.0.0\/"};
</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"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[components]="components"
[rowData]="rowData"
[editType]="editType"
(cellClicked)="onCellClicked($event)"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
</div>
<div style="position: absolute; top: 0; left: 0;">
<button style="font-size: 12px" (click)="onBtStartEditing()">Start Editing Line 2</button>
<button style="font-size: 12px" (click)="onBtStopEditing()">Stop Editing</button>
</div>`
})
export class AppComponent {
private gridApi;
private gridColumnApi;
private columnDefs;
private components;
private rowData;
private editType;
private editingRowIndex;
constructor() {
this.columnDefs = [
{
headerName: "Make",
field: "make",
editable: true,
cellEditor: "agSelectCellEditor",
cellEditorParams: {
values: ["AAA", "BBB", "CCC"]
}
},
{
headerName: "Model",
field: "model",
editable: true
},
{
headerName: "Price",
field: "price",
editable: true,
cellEditor: "numericCellEditor"
},
{
headerName: "Suppress Navigable",
field: "field5",
editable: true,
suppressNavigable: true
},
{
headerName: "Not Editable",
field: "field6",
editable: false
}
];
this.components = { numericCellEditor: getNumericCellEditor() };
this.rowData = getRowData();
this.editType = "fullRow";
}
onCellClicked($event){
// check whether the current row is already opened in edit or not
if(this.editingRowIndex != $event.rowIndex) {
console.log($event);
$event.api.startEditingCell({
rowIndex: $event.rowIndex,
colKey: $event.column.colId
});
this.editingRowIndex = $event.rowIndex;
}
}
onBtStopEditing() {
this.gridApi.stopEditing();
}
onBtStartEditing() {
this.gridApi.setFocusedCell(2, "make");
this.gridApi.startEditingCell({
rowIndex: 2,
colKey: "make"
});
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
params.api.sizeColumnsToFit();
}
}
function getRowData() {
var rowData = [];
for (var i = 0; i < 10; i++) {
rowData.push({
make: "Toyota",
model: "Celica",
price: 35000 + i * 1000,
field5: "Sample 22",
field6: "Sample 23"
});
rowData.push({
make: "Ford",
model: "Mondeo",
price: 32000 + i * 1000,
field5: "Sample 24",
field6: "Sample 25"
});
rowData.push({
make: "Porsche",
model: "Boxter",
price: 72000 + i * 1000,
field5: "Sample 26",
field6: "Sample 27"
});
}
return rowData;
}
function getNumericCellEditor() {
function isCharNumeric(charStr) {
return !!/\d/.test(charStr);
}
function isKeyPressedNumeric(event) {
var charCode = getCharCodeFromEvent(event);
var charStr = String.fromCharCode(charCode);
return isCharNumeric(charStr);
}
function getCharCodeFromEvent(event) {
event = event || window.event;
return typeof event.which === "undefined" ? event.keyCode : event.which;
}
function NumericCellEditor() {}
NumericCellEditor.prototype.init = function(params) {
this.focusAfterAttached = params.cellStartedEdit;
this.eInput = document.createElement("input");
this.eInput.style.width = "100%";
this.eInput.style.height = "100%";
this.eInput.value = isCharNumeric(params.charPress) ? params.charPress : params.value;
var that = this;
this.eInput.addEventListener("keypress", function(event) {
if (!isKeyPressedNumeric(event)) {
that.eInput.focus();
if (event.preventDefault) event.preventDefault();
}
});
};
NumericCellEditor.prototype.getGui = function() {
return this.eInput;
};
NumericCellEditor.prototype.afterGuiAttached = function() {
if (this.focusAfterAttached) {
this.eInput.focus();
this.eInput.select();
}
};
NumericCellEditor.prototype.isCancelBeforeStart = function() {
return this.cancelBeforeStart;
};
NumericCellEditor.prototype.isCancelAfterEnd = function() {};
NumericCellEditor.prototype.getValue = function() {
return this.eInput.value;
};
NumericCellEditor.prototype.focusIn = function() {
var eInput = this.getGui();
eInput.focus();
eInput.select();
console.log("NumericCellEditor.focusIn()");
};
NumericCellEditor.prototype.focusOut = function() {
console.log("NumericCellEditor.focusOut()");
};
return NumericCellEditor;
}
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 {}
/* if you want to highlight the editing row, you can make use of the ag-row-editing class, it gets put onto
the row that is currently in edit mode. */
.ag-row-editing {
background-color: #5bc0de !important;
}
// 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';
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/bundles/material.umd.js',
'@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
'@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
'@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
'@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
'@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
'@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
'@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
'@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
'@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
'@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
'@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
'@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
'@angular/cdk/stepper': 'npm:@angular/cdk/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'
},
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);