<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion Angular Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="http://npmci.syncfusion.com/packages/production/ej2-grids/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<app-container>
<div id='loader'>Loading....</div>
</app-container>
</body>
</html>
import { Component, OnInit } from '@angular/core';
import { EditSettingsModel, ToolbarItems, IEditCell } from '@syncfusion/ej2-ng-grids';
import { data } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings'[toolbar]='toolbar' height='273px'>
<e-columns>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Quantity' headerText='Quantity' editType= 'numericedit' [edit]='numericParams' width=150></e-column>
<e-column field='Price' headerText='Price' editType= 'numericedit' [edit]='numericParams' width=150></e-column>
<e-column field='Total' headerText='Total' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: Object[];
public editSettings: EditSettingsModel;
public toolbar: ToolbarItems[];
public numericParams: IEditCell;
public ddParams: IEditCell;
change(args){
console.log(args);
let gridElement = document.getElementById('grid_0');
let gridObj = gridElement.ej2_instances[0]; //get gridobj
let uid = gridObj.getColumnByField("Price").uid; // column uid
let editTR = gridElement.querySelector(".e-normaledit"); // check normal edit
let freightColObj = editTR.querySelector('[e-mappinguid='+ uid +']').ej2_instances[0]; // get freightcolobj
freightColObj.value = args.value * 4; // assign value
}
ngOnInit(): void {
this.data = data;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.numericParams = { params: {change: this.change } };
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, EditService, ToolbarService } from '@syncfusion/ej2-ng-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [EditService, ToolbarService]
})
export class AppModule { }
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET',
ShipName: 'Vins et alcools Chevalier', Quantity:50, Price: 0.80, Total:40
},
{
OrderID: 10249, CustomerID: 'TOMSP', Quantity:150, Price: 0.10, Total:15
},
{
OrderID: 10250, CustomerID: 'HANAR', Quantity:250, Price: 1.80, Total:450
}];
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
System.config({
transpiler: "typescript",
typescriptOptions: {
compilerOptions: {
target: "umd",
module: "commonjs",
moduleResolution: "node",
emitDecoratorMetadata: true,
experimentalDecorators: true
}
},
paths: {
"syncfusion:": "http://npmci.syncfusion.com/packages/production/",
"angular:": "https://unpkg.com/@angular/"
},
map: {
app: 'app',
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"@syncfusion/ej2-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"@syncfusion/ej2-ng-base": "syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js",
"@syncfusion/ej2-ng-grids": "syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js",
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
'@angular/core': 'angular:core/bundles/core.umd.js',
'@angular/common': 'angular:common/bundles/common.umd.js',
'@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',
'@angular/http': 'angular:http/bundles/http.umd.js',
'@angular/forms': 'angular:forms/bundles/forms.umd.js',
'@angular/router': 'angular:router/bundles/router.umd.js',
'@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/material': 'angular:material/bundles/material.umd.js',
'rxjs': 'https://unpkg.com/rxjs'
},
packages: {
'app': { main: 'main', defaultExtension: 'ts' },
'rxjs': { main: 'index' },
}
});
System.import('app');