Edit Form Template | Features | MESCIUS DataViewsJS Angular Demos

This example shows how you can customize the built-in data editors using the editRowTemplate property. In the sample, you can choose the editing mode (popup or editForm). When you double-click a row, the editor is shown in the container you chose. Notice that the form looks the same either way and looks slightly different than the default editing forms (see the Editor Mode demo). You can create a template for these forms using typical HTML form markup. To create and apply a template: Design a form inside a <template> element and give the element a unique id (editRowTemplate in this example). Style your form using CSS. Add the editRowTemplate property to the grid code and use the template id preceded by '#' (editRowTemplate : '#editRowTemplate' in this example').

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Editing/EditFormTemplate/angular/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="editing, editor, data editor, data editing, template" />
<meta
name="description"
content="This example shows how you can customize the built-in data editors using the **editRowTemplate** property."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Edit Form Template | Features | MESCIUS DataViewsJS Angular Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/angular-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'angular',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="editRowTemplate" style="display: none">
<div class="edit-row">
<div class="edit-detail">
<label class="column1">First Name</label>
<input class="column2" data-column="firstName" />
</div>
<div class="edit-detail">
<label class="column1">Last Name</label>
<input class="column2" data-column="lastName" />
</div>
</div>
<div class="edit-row">
<div class="edit-detail">
<label class="column1">Score</label>
<input class="column2" data-column="score" />
</div>
<div class="edit-detail">
<label class="column1">Position</label>
<select class="column2" data-column="position">
<option>Sales</option>
<option>Sales Manager</option>
<option>Web Developer</option>
<option>.NET Developer</option>
<option>Admin Assistant</option>
</select>
</div>
</div>
<div class="edit-advantage edit-detail">
<label class="column1">Advantage</label>
<textarea data-column="advantage"></textarea>
</div>
</template>
<app-root></app-root>
<script type="text/javascript">
System.import('./app.ts');
</script>
</body>
</html>

<div class="main-container">
<div class="sample-options">
<label>{{ locale.editMode }}</label>
<select id="grid-edit-mode" [(ngModel)]="editMode">
<option value="popup">{{ locale.popup }}</option>
<option value="editForm">{{ locale.editForm }}</option>
</select>
</div>
<gc-dataview
id="grid"
class="grid"
[data]="data"
[cols]="cols"
[layout]="layout"
[options]="options"
autoFocus
></gc-dataview>
</div>

import { Component } from '@angular/core';
import { GridLayout } from '@grapecity/dataviews.grid';
import { data } from './data';
import locale from './locale';
export const cols = [
{
id: 'firstName',
caption: 'First Name',
dataField: 'firstName',
width: 100,
},
{
id: 'lastName',
caption: 'Last Name',
dataField: 'lastName',
width: 100,
},
{
id: 'score',
caption: 'Score',
dataField: 'score',
width: 100,
},
{
id: 'position',
caption: 'Position',
dataField: 'position',
width: 150,
},
{
id: 'advantage',
caption: 'Advantage',
dataField: 'advantage',
width: '*',
},
];
const layout = new GridLayout({
allowEditing: true,
editRowTemplate: '#editRowTemplate',
editMode: 'editForm',
rowHeight: 40,
});
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})
export class AppComponent {
locale = locale;
data = data;
cols = cols;
layout = layout;
editMode = 'editForm';
get options() {
return { editMode: this.editMode };
}
}

import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { DataViewModule } from '@grapecity/dataviews.angular';
// zone.js should be loaded last to fix error 'ZoneAwarePromise has been overwritten'
import 'zone.js';
@NgModule({
declarations: [AppComponent],
imports: [DataViewModule, BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
if (process.env.NODE_ENV === 'production') {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));

// resumes
export const data = [
{
firstName: 'Alexa',
lastName: 'Wilder',
registeredDate: 'Oct 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'Very smart. He can solve problems in a short time.',
},
{
firstName: 'Victor',
lastName: 'Wooten',
registeredDate: 'May 14, 2018',
score: 70,
position: 'Web Developer',
advantage: 'Positive and optimistic, always first to work on latest technology in company.',
},
{
firstName: 'Darrin',
lastName: 'Sweeney',
registeredDate: 'June 14, 2018',
score: 60,
position: '.NET Developer',
advantage: 'Loves games day, family day, and outings.',
},
{
firstName: 'Jen',
lastName: 'Coulter',
registeredDate: 'April 14, 2018',
score: '95',
position: 'Admin Assistant',
advantage: 'Very good communication skills.',
},
{
firstName: 'Ifeoma',
lastName: 'Mays',
registeredDate: 'April 14,2018',
score: 85,
position: 'Sales Manager',
advantage: 'Manages his team well. They are always ready to resolve conflict.',
},
{
firstName: 'Akeem',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 80,
position: 'Sales Manager',
advantage: 'Has experience in managing teams over 20 employees.',
},
{
firstName: 'Buffy',
lastName: 'Weber',
registeredDate: 'April 25, 2018',
score: 80,
position: 'Sales',
advantage: 'Is eager to communicate with others.',
},
{
firstName: 'Akeem',
lastName: 'Abdul',
registeredDate: 'April 14, 2018',
score: 80,
position: 'Web Developer',
advantage: 'Positive and optimistic, always first to work on latest technology in company.',
},
{
firstName: 'Buffy',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'Very smart. He can solve problems quickly.',
},
{
firstName: 'Guy',
lastName: 'Wooten',
registeredDate: 'July 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'A lot of experience on latest technology.',
},
{
firstName: 'Gina',
lastName: 'Wilder',
registeredDate: 'Oct 14, 2018',
score: 70,
position: 'Web Developer',
advantage: 'Very smart. She can solve problems quickly.',
},
{
firstName: 'Guy',
lastName: 'Wooten',
registeredDate: 'May 14, 2018',
score: 90,
position: 'Sales',
advantage: 'Is eager to communicate with others Would be good at networking.',
},
{
firstName: 'Daryl',
lastName: 'Sweeney',
registeredDate: 'June 14, 2018',
score: 90,
position: 'Sales',
advantage: 'Love games day, family day, and outings.',
},
{
firstName: 'Sally',
lastName: 'Weber',
registeredDate: 'April 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'Very smart. She can solve problems quickly.',
},
{
firstName: 'Euna Lee',
lastName: 'Mays',
registeredDate: 'April 14,2018',
score: 90,
position: 'Admin Assistant',
advantage: 'HR department is good. They always ready to resolve confusions if any.',
},
{
firstName: 'Akeem',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 60,
position: 'Admin Assistant',
advantage: 'Manages his team well. They are always ready to resolve conflict.',
},
{
firstName: 'Buffy',
lastName: 'Weber',
registeredDate: 'April 25, 2018',
score: 65,
position: 'Admin Assistant',
advantage: 'Manages her team well. They are always ready to resolve conflict.',
},
{
firstName: 'Aaron',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 60,
position: '.NET Developer',
advantage: 'Very smart. He can solve problems quickly.',
},
{
firstName: 'Buffy',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 70,
position: '.NET Developer',
advantage: 'A lot of exposure on latest technology.',
},
{
firstName: 'Guy',
lastName: 'Junker',
registeredDate: 'July 14, 2018',
score: 80,
position: '.NET Developer',
advantage: 'A lot of exposure on latest technology.',
},
];

export default { editMode: 'Edit mode:', popup: 'popup', editForm: 'editForm' };

.main-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.sample-options {
background: #fbfbfb;
box-sizing: border-box;
overflow: auto;
padding: 10px;
flex-grow: 0;
flex-shrink: 0;
}
.sample-options label {
margin-right: 5px;
}
.grid {
height: 100%;
width: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.column1 {
display: inline-block;
margin-left: 30px;
width: 90px;
}
.column2 {
width: 186px;
}
.edit-detail {
display: inline-block;
margin: 4px;
}
.edit-detail *:focus {
outline: none;
}
.edit-detail input {
padding: 0 2px;
}
.edit-advantage label {
vertical-align: top;
}
.edit-advantage textarea {
height: 50px;
resize: none;
width: 500px;
}
.gc-popup-dialog {
background: #f1f1f1;
}
.gc-popup-editing-area {
width: 690px;
}
@media only screen and (max-width: 768px) {
.gc-popup-editing-area {
width: 300px;
}
.column2 {
margin-left: 30px;
}
.edit-detail {
display: block;
}
.edit-advantage textarea {
margin-left: 30px;
width: 250px;
}
.sample-options {
display: none;
}
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0VkaXRpbmcvRWRpdEZvcm1UZW1wbGF0ZS9hbmd1bGFyL3N0eWxlcy5zY3NzIiwiRmVhdHVyZXMvRWRpdGluZy9FZGl0Rm9ybVRlbXBsYXRlL2FuZ3VsYXIvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxtQkFBQTtFQUNBLHNCQUFBO0VBQ0EsY0FBQTtFQUNBLGFBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0NGO0FEQ0U7RUFDRSxpQkFBQTtBQ0NKOztBREdBO0VBQ0UsWUFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0FGOztBREdBO0VBQ0UscUJBQUE7RUFDQSxpQkFBQTtFQUNBLFdBQUE7QUNBRjs7QURHQTtFQUNFLFlBQUE7QUNBRjs7QURHQTtFQUNFLHFCQUFBO0VBQ0EsV0FBQTtBQ0FGOztBREdBO0VBQ0UsYUFBQTtBQ0FGOztBREdBO0VBQ0UsY0FBQTtBQ0FGOztBREdBO0VBQ0UsbUJBQUE7QUNBRjs7QURHQTtFQUNFLFlBQUE7RUFDQSxZQUFBO0VBQ0EsWUFBQTtBQ0FGOztBREdBO0VBQ0UsbUJBQUE7QUNBRjs7QURHQTtFQUNFLFlBQUE7QUNBRjs7QURHQTtFQUNFO0lBQ0UsWUFBQTtFQ0FGO0VER0E7SUFDRSxpQkFBQTtFQ0RGO0VESUE7SUFDRSxjQUFBO0VDRkY7RURLQTtJQUNFLGlCQUFBO0lBQ0EsWUFBQTtFQ0hGO0VETUE7SUFDRSxhQUFBO0VDSkY7QUFDRiIsImZpbGUiOiJGZWF0dXJlcy9FZGl0aW5nL0VkaXRGb3JtVGVtcGxhdGUvYW5ndWxhci9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDA7XG5cbiAgbGFiZWwge1xuICAgIG1hcmdpbi1yaWdodDogNXB4O1xuICB9XG59XG5cbi5ncmlkIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLmNvbHVtbjEge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIG1hcmdpbi1sZWZ0OiAzMHB4O1xuICB3aWR0aDogOTBweDtcbn1cblxuLmNvbHVtbjIge1xuICB3aWR0aDogMTg2cHg7XG59XG5cbi5lZGl0LWRldGFpbCB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgbWFyZ2luOiA0cHg7XG59XG5cbi5lZGl0LWRldGFpbCAqOmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbn1cblxuLmVkaXQtZGV0YWlsIGlucHV0IHtcbiAgcGFkZGluZzogMCAycHg7XG59XG5cbi5lZGl0LWFkdmFudGFnZSBsYWJlbCB7XG4gIHZlcnRpY2FsLWFsaWduOiB0b3A7XG59XG5cbi5lZGl0LWFkdmFudGFnZSB0ZXh0YXJlYSB7XG4gIGhlaWdodDogNTBweDtcbiAgcmVzaXplOiBub25lO1xuICB3aWR0aDogNTAwcHg7XG59XG5cbi5nYy1wb3B1cC1kaWFsb2cge1xuICBiYWNrZ3JvdW5kOiAjZjFmMWYxO1xufVxuXG4uZ2MtcG9wdXAtZWRpdGluZy1hcmVhIHtcbiAgd2lkdGg6IDY5MHB4O1xufVxuXG5AbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gIC5nYy1wb3B1cC1lZGl0aW5nLWFyZWEge1xuICAgIHdpZHRoOiAzMDBweDtcbiAgfVxuXG4gIC5jb2x1bW4yIHtcbiAgICBtYXJnaW4tbGVmdDogMzBweDtcbiAgfVxuXG4gIC5lZGl0LWRldGFpbCB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cblxuICAuZWRpdC1hZHZhbnRhZ2UgdGV4dGFyZWEge1xuICAgIG1hcmdpbi1sZWZ0OiAzMHB4O1xuICAgIHdpZHRoOiAyNTBweDtcbiAgfVxuXG4gIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuIiwiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDA7XG59XG4uc2FtcGxlLW9wdGlvbnMgbGFiZWwge1xuICBtYXJnaW4tcmlnaHQ6IDVweDtcbn1cblxuLmdyaWQge1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xufVxuXG4uY29sdW1uMSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgbWFyZ2luLWxlZnQ6IDMwcHg7XG4gIHdpZHRoOiA5MHB4O1xufVxuXG4uY29sdW1uMiB7XG4gIHdpZHRoOiAxODZweDtcbn1cblxuLmVkaXQtZGV0YWlsIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBtYXJnaW46IDRweDtcbn1cblxuLmVkaXQtZGV0YWlsICo6Zm9jdXMge1xuICBvdXRsaW5lOiBub25lO1xufVxuXG4uZWRpdC1kZXRhaWwgaW5wdXQge1xuICBwYWRkaW5nOiAwIDJweDtcbn1cblxuLmVkaXQtYWR2YW50YWdlIGxhYmVsIHtcbiAgdmVydGljYWwtYWxpZ246IHRvcDtcbn1cblxuLmVkaXQtYWR2YW50YWdlIHRleHRhcmVhIHtcbiAgaGVpZ2h0OiA1MHB4O1xuICByZXNpemU6IG5vbmU7XG4gIHdpZHRoOiA1MDBweDtcbn1cblxuLmdjLXBvcHVwLWRpYWxvZyB7XG4gIGJhY2tncm91bmQ6ICNmMWYxZjE7XG59XG5cbi5nYy1wb3B1cC1lZGl0aW5nLWFyZWEge1xuICB3aWR0aDogNjkwcHg7XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgLmdjLXBvcHVwLWVkaXRpbmctYXJlYSB7XG4gICAgd2lkdGg6IDMwMHB4O1xuICB9XG4gIC5jb2x1bW4yIHtcbiAgICBtYXJnaW4tbGVmdDogMzBweDtcbiAgfVxuICAuZWRpdC1kZXRhaWwge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG4gIC5lZGl0LWFkdmFudGFnZSB0ZXh0YXJlYSB7XG4gICAgbWFyZ2luLWxlZnQ6IDMwcHg7XG4gICAgd2lkdGg6IDI1MHB4O1xuICB9XG4gIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufSJdfQ== */

(function () {
const IS_PROD = window.process.env.NODE_ENV === 'production';
const USE_NPM = window.process.env.USE_NPM;
const USE_CDN = window.process.env.USE_CDN;
const SITE_ROOT = window.process.env.SITE_ROOT;
const FRAMEWORK = window.process.env.FRAMEWORK;
const ext = IS_PROD ? '.min.js' : '.js';
function js(name) {
return name + ext;
}
function npm(t) {
if (!t.file) {
t.file = IS_PROD ? t.prod : t.dev;
}
const version = USE_CDN && t.version ? '@' + t.version : '';
const path = t.pkg + version + '/' + t.file;
if (USE_CDN) {
return 'https://unpkg.com/' + path;
}
return 'npm:' + path;
}
function dv(t) {
if (USE_CDN || USE_NPM) {
t.file = 'dist/' + t.file + '.min.js';
return npm(t);
}
return SITE_ROOT + '/static/dataviews/' + js(t.file);
}
const isTypeScript = FRAMEWORK === 'angular';
const babelConfig = {
es2015: true,
react: true,
};
const meta = {
js: {
babelOptions: babelConfig,
},
ts: {
typescriptOptions: {
tsconfig: true
},
},
};
const map = {
// gc.dataviews packages
'@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.17'}),
'@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}),
'@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}),
'@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}),
'@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}),
'@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}),
'@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}),
'@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}),
'@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}),
'@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}),
'@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}),
'@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}),
'@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}),
'@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}),
// third-party libs
react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}),
'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}),
'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}),
'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.12'}),
'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}),
'lodash': npm({pkg: 'lodash', file: js('lodash')}),
'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}),
'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}),
'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}),
'@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}),
'@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}),
'@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}),
'@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}),
'@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}),
'@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}),
'@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}),
'@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}),
'@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}),
// systemjs plugins
'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}),
'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}),
'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}),
'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}),
'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}),
'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'4.0.2'}),
'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}),
};
const config = {
defaultJSExtensions: true,
transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel',
typescriptOptions: {
tsconfig: true
},
meta: {
'*.json': {loader: 'systemjs-plugin-json'},
'*.css': {loader: 'systemjs-plugin-css'},
'*.vue': {loader: 'systemjs-vue-browser'},
'*.js': meta.js,
'*.ts': meta.ts,
'app.js': {
format: 'esm',
babelOptions: babelConfig,
},
'typescript': {
exports: 'ts',
},
'@grapecity/dataviews.common': {
format: 'amd',
},
'@grapecity/dataviews.core': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.grid': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.cardlayout': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.masonry': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.calendar': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.timeline': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.trellis': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.gantt': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.searchbox': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.react': {
format: 'amd',
deps: [
'react',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.vue': {
format: 'amd',
deps: [
'vue',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.angular': {
format: 'amd',
deps: [
'@angular/core',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.csvexport': {
format: 'amd',
deps: [
'@grapecity/dataviews.common'
],
},
},
paths: {
// paths serve as alias
'npm:': SITE_ROOT + '/node_modules/',
},
// map tells the System loader where to look for things
map: map,
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'.': { defaultExtension: isTypeScript ? 'ts' : 'js' },
node_modules: { defaultExtension: 'js' },
}
};
// fast format detection to avoid detection by source code using regexp
Object.keys(map).filter(function (key) {
return !config.meta[key];
}).forEach(function (key) {
const path = map[key];
if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) {
config.meta[key] = { format: 'amd' };
}
if (path.indexOf('/cjs') >= 0) {
config.meta[key] = { format: 'cjs' };
}
});
System.config(config);
})(this);

Edit Form Template (Angular)