Multiple Row (Angular)

This example demonstrates how easy it is to define a row template with HTML syntax. In the example a template has been defined to present data rows on multiple lines.

This example uses Angular.

This example demonstrates how easy it is to define a row template with HTML syntax. In the example a template has been defined to present data rows on multiple lines. As you can see in the code, you can define the template in the <template> tag with nested <div> tags. You apply this template to the view by specifying a unique id in the template tag (rowTmpl in this example) and referring to it in the grid options object by adding the prefix '#'.
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/RowTemplates/MultipleRow/angular/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="rows, template, row template, rowtemplate" /> <meta name="description" content="This example demonstrates how easy it is to define a row template with HTML syntax. In the example a template has been defined to present data rows on multiple lines." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Multiple Row | Features | GrapeCity 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: 'GrapeCity-Internal-Use-Only,GrapeCity,E195393772372914#B0KV4Ny56Vr5Wb7w6buJWeGRWb4NXUnNXRlFWWXl6SoN5VzVkYslmQ95WTENkTllVQzd4QhpEejdDNJZlWOp6M7oERQNnWspkaaB5QMhnR7dmUkRnVJR4L5cHTKNkZZdDbRBzZIxmSSR6NrpVQaVUQrBlc6ImYysSd4UlUEZGbw2kMl9UOzQVMId6ZXtUN83CO5RzaZt4VY5kM5pkUGpUUUV7UExUeGpUdTV5dFJ4bPhTc8pGeXJHWrkzNlFzdUtWTr5UQDdVckdGbSVUWr2yMPNzctZVRxEEW9lEbsZHUKJnVaRXT5p6Z0tWMqJGVrtSTIZnaopGSWZXbVNjY0hzQB5We4dnUr3ER8MkI0IyUiwiIGZUNwEkN5MjI0ICSiwSM9ETO6czNygTM0IicfJye#4Xfd5nIZRVV9IiOiMkIsISM6ByUKN7dllmVhRXYEJiOi8kI1tlOiQmcQJCLiEDMzATOwAyMwgDMwIDMyIiOiQncDJCLiI7au26YukHdpNWZwFmcn9iKsAnau26YukHdpNWZwFmcn9iKs86Yu46bj9Se4l6YlBXYydmLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLt36YukHdpNWZwFmcn9iKiojIz5GRiwiI9RXaDVGchJ7RiojIh94QiwSZ5JHd0ICb6VkIsICNxkjM7MjM7czM9MTN9EjI0ICZJJye0ICRiwiI34zZN3yZGNlUnJDe5wkQPVlcBh7SppmUNBlU9dWS7J4ZMRES4MTZkRXTxM7Uq5GeQdHcyFHVup6dQd6ZDpEVrNDSh9kbNdzZrl4dwdPQ', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </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="rowTmpl" style="display: none" type="text/dataView-template"> <div style="height: 100%"> <div class="gc-cell gc-cell-border" style=" display: inline-block; vertical-align: top; width: 80px; height: 100px; line-height: 100px; text-align: center; " data-column="id" data-taborder="0" ></div> <div style="display: inline-block; vertical-align: top; height: 100%" data-column-group> <div style="height: 33px; line-height: 33px" data-column-group> <div class="gc-cell gc-cell-border" style="display: inline-block; width: 200px; height: 100%; line-height: 33px" data-column="name" data-taborder="1" ></div> <div class="gc-cell gc-cell-border" style="display: inline-block; width: 187px; height: 100%; line-height: 33px" data-column="sku" data-taborder="2" ></div> </div> <div style="height: 34px; line-height: 34px" data-column-group> <div class="gc-cell gc-cell-border" style="display: inline-block; line-height: 34px; height: 100%; width: 200px" data-column="quantityPerUnit" data-taborder="3" ></div> <div class="gc-cell gc-cell-border" style="display: inline-block; line-height: 34px; height: 100%; width: 187px; text-align: left" data-column="price" data-taborder="4" ></div> </div> <div class="gc-cell gc-cell-border" style="height: 33px; line-height: 33px; width: 387px" data-column="description" data-taborder="5" ></div> </div> <div style="display: inline-block; vertical-align: top; height: 100%" data-column-group> <div class="gc-cell gc-cell-border" style="height: 33px; line-height: 33px; width: 120px; text-align: center" data-column="inStock" data-taborder="6" ></div> <div class="gc-cell gc-cell-border" style="height: 34px; line-height: 34px; width: 120px; text-align: center" data-column="reorderLevel" data-taborder="7" ></div> <div class="gc-cell gc-cell-border" style="height: 33px; line-height: 33px; width: 120px; text-align: center" data-column="unitsOnOrder" data-taborder="8" ></div> </div> <div style="display: inline-block; vertical-align: top; height: 100%" data-column-group> <div class="gc-cell gc-cell-border" style="height: 33px; line-height: 33px; width: 200px" data-column="supplier" data-taborder="9" ></div> <div class="gc-cell gc-cell-border" style="height: 34px; line-height: 34px; width: 200px" data-column="location" data-taborder="10" ></div> <div class="gc-cell gc-cell-border" style="height: 33px; line-height: 33px; width: 200px" data-column="telephone" data-taborder="11" ></div> </div> <div class="gc-cell gc-cell-border" style=" display: inline-block; vertical-align: top; height: 100px; line-height: 100px; width: 110px; text-align: center; " data-column="discontinued" data-taborder="12" ></div> </div> </template> <app-root></app-root> <script type="text/javascript"> System.import('./app.ts'); </script> </body> </html>
import { Component } from '@angular/core'; import { GridLayout } from '@grapecity/dataviews.grid'; import { data } from './data'; const colFormatter = '<span>{{? it.discontinued}}✔{{??}}✖{{?}}</span>'; const cols = [ { id: 'id', caption: 'ID', dataField: 'ProductID' }, { id: 'name', caption: 'Name', dataField: 'ProductName' }, { id: 'sku', caption: 'Category', dataField: 'Category.CategoryName' }, { id: 'description', caption: 'Description', dataField: 'Category.Description', }, { id: 'quantityPerUnit', caption: 'Quantity Per Unit', dataField: 'QuantityPerUnit', }, { id: 'inStock', caption: 'In Stock', dataField: 'UnitsInStock' }, { id: 'price', caption: 'Unit Price', dataField: 'UnitPrice' }, { id: 'discontinued', caption: 'Discontinued', dataField: 'Discontinued', presenter: colFormatter, }, { id: 'reorderLevel', caption: 'Reorder Level', dataField: 'ReorderLevel' }, { id: 'unitsOnOrder', caption: 'Units on order', dataField: 'UnitsOnOrder', }, { id: 'supplier', caption: 'Supplier', dataField: 'Supplier.CompanyName' }, { id: 'location', caption: 'Address', dataField: 'Supplier.Address' }, { id: 'telephone', caption: 'Telephone', dataField: 'Supplier.Telephone' }, ]; const layout = new GridLayout({ rowHeight: 100, colHeaderHeight: 100, rowTemplate: '#rowTmpl', }); @Component({ selector: 'app-root', template: ` <gc-dataview id="grid" class="grid" [data]="data" [cols]="cols" [layout]="layout" autoFocus></gc-dataview> `, }) export class AppComponent { data = data; cols = cols; layout = layout; }
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));
export const data = [ { ProductID: 1, ProductName: 'Chai', QuantityPerUnit: '10 boxes x 20 bags', UnitPrice: 18.0, UnitsInStock: 39, UnitsOnOrder: 0, ReorderLevel: 10, Discontinued: false, Category: { CategoryId: 1, CategoryName: 'Beverages', Description: 'Soft drinks, coffees, teas, beers, and ales', }, Supplier: { CompanyName: 'Exotic Liquids', Address: '6649 N Blue Gum St', Telephone: '504-621-8927', }, }, { ProductID: 2, ProductName: 'Chang', QuantityPerUnit: '24 - 12 oz bottles', UnitPrice: 19.0, UnitsInStock: 17, UnitsOnOrder: 40, ReorderLevel: 25, Discontinued: false, Category: { CategoryId: 1, CategoryName: 'Beverages', Description: 'Soft drinks, coffees, teas, beers, and ales', }, Supplier: { CompanyName: 'Exotic Liquids', Address: '6649 N Blue Gum St', Telephone: '504-621-8927', }, }, { ProductID: 3, ProductName: 'Aniseed Syrup', QuantityPerUnit: '12 - 550 ml bottles', UnitPrice: 10.0, UnitsInStock: 13, UnitsOnOrder: 70, ReorderLevel: 25, Discontinued: false, Category: { CategoryId: 2, CategoryName: 'Condiments', Description: 'Sweet and savory sauces, relishes, spreads, and seasonings', }, Supplier: { CompanyName: 'Exotic Liquids', Address: '6649 N Blue Gum St', Telephone: '504-621-8927', }, }, { ProductID: 4, ProductName: "Chef Anton's Cajun Seasoning", QuantityPerUnit: '48 - 6 oz jars', UnitPrice: 22.0, UnitsInStock: 53, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false, Category: { CategoryId: 2, CategoryName: 'Condiments', Description: 'Sweet and savory sauces, relishes, spreads, and seasonings', }, Supplier: { CompanyName: 'New Orleans Cajun Delights', Address: '4 B Blue Ridge Blvd', Telephone: '810-292-9388', }, }, { ProductID: 5, ProductName: "Chef Anton's Gumbo Mix", QuantityPerUnit: '36 boxes', UnitPrice: 21.35, UnitsInStock: 0, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: true, Category: { CategoryId: 2, CategoryName: 'Condiments', Description: 'Sweet and savory sauces, relishes, spreads, and seasonings', }, Supplier: { CompanyName: 'New Orleans Cajun Delights', Address: '4 B Blue Ridge Blvd', Telephone: '810-292-9388', }, }, { ProductID: 6, ProductName: "Grandma's Boysenberry Spread", QuantityPerUnit: '12 - 8 oz jars', UnitPrice: 25.0, UnitsInStock: 120, UnitsOnOrder: 0, ReorderLevel: 25, Discontinued: false, Category: { CategoryId: 2, CategoryName: 'Condiments', Description: 'Sweet and savory sauces, relishes, spreads, and seasonings', }, Supplier: { CompanyName: "Grandma Kelly's Homestead", Address: '8 W Cerritos Ave #54', Telephone: '856-636-8749', }, }, { ProductID: 7, ProductName: "Uncle Bob's Organic Dried Pears", QuantityPerUnit: '12 - 1 lb pkgs.', UnitPrice: 30.0, UnitsInStock: 15, UnitsOnOrder: 0, ReorderLevel: 10, Discontinued: false, Category: { CategoryId: 3, CategoryName: 'Produce', Description: 'Dried fruit and bean curd', }, Supplier: { CompanyName: "Grandma Kelly's Homestead", Address: '8 W Cerritos Ave #54', Telephone: '856-636-8749', }, }, { ProductID: 8, ProductName: 'Northwoods Cranberry Sauce', QuantityPerUnit: '12 - 12 oz jars', UnitPrice: 40.0, UnitsInStock: 6, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false, Category: { CategoryId: 2, CategoryName: 'Condiments', Description: 'Sweet and savory sauces, relishes, spreads, and seasonings', }, Supplier: { CompanyName: "Grandma Kelly's Homestead", Address: '8 W Cerritos Ave #54', Telephone: '856-636-8749', }, }, { ProductID: 9, ProductName: 'Mishi Kobe Niku', QuantityPerUnit: '18 - 500 g pkgs.', UnitPrice: 97.0, UnitsInStock: 29, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: true, Category: { CategoryId: 4, CategoryName: 'Meat/Poultry', Description: 'Prepared meats', }, Supplier: { CompanyName: 'Tokyo Traders', Address: '3 Mcauley Dr', Telephone: '419-503-2484', }, }, { ProductID: 10, ProductName: 'Ikura', QuantityPerUnit: '12 - 200 ml jars', UnitPrice: 31.0, UnitsInStock: 31, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false, Category: { CategoryId: 5, CategoryName: 'Seafood', Description: 'Seaweed and fish', }, Supplier: { CompanyName: 'Tokyo Traders', Address: '3 Mcauley Dr', Telephone: '419-503-2484', }, }, { ProductID: 11, ProductName: 'Queso Cabrales', QuantityPerUnit: '1 kg pkg.', UnitPrice: 21.0, UnitsInStock: 22, UnitsOnOrder: 30, ReorderLevel: 30, Discontinued: false, Category: { CategoryId: 6, CategoryName: 'Dairy Products', Description: 'Cheeses', }, Supplier: { CompanyName: "Cooperativa de Quesos 'Las Cabras'", Address: '322 New Horizon Blvd', Telephone: '414-661-9598', }, }, { ProductID: 12, ProductName: 'Queso Manchego La Pastora', QuantityPerUnit: '10 - 500 g pkgs.', UnitPrice: 38.0, UnitsInStock: 86, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false, Category: { CategoryId: 6, CategoryName: 'Dairy Products', Description: 'Cheeses', }, Supplier: { CompanyName: "Cooperativa de Quesos 'Las Cabras'", Address: '322 New Horizon Blvd', Telephone: '414-661-9598', }, }, { ProductID: 13, ProductName: 'Konbu', QuantityPerUnit: '2 kg box', UnitPrice: 6.0, UnitsInStock: 24, UnitsOnOrder: 0, ReorderLevel: 5, Discontinued: false, Category: { CategoryId: 5, CategoryName: 'Seafood', Description: 'Seaweed and fish', }, Supplier: { CompanyName: "Mayumi's", Address: '6 S 33rd St', Telephone: '610-545-3615', }, }, { ProductID: 14, ProductName: 'Tofu', QuantityPerUnit: '40 - 100 g pkgs.', UnitPrice: 23.25, UnitsInStock: 35, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false, Category: { CategoryId: 3, CategoryName: 'Produce', Description: 'Dried fruit and bean curd', }, Supplier: { CompanyName: "Mayumi's", Address: '6 S 33rd St', Telephone: '610-545-3615', }, }, { ProductID: 15, ProductName: 'Genen Shouyu', QuantityPerUnit: '24 - 250 ml bottles', UnitPrice: 15.5, UnitsInStock: 39, UnitsOnOrder: 0, ReorderLevel: 5, Discontinued: false, Category: { CategoryId: 2, CategoryName: 'Condiments', Description: 'Sweet and savory sauces, relishes, spreads, and seasonings', }, Supplier: { CompanyName: "Mayumi's", Address: '6 S 33rd St', Telephone: '610-545-3615', }, }, { ProductID: 16, ProductName: 'Pavlova', QuantityPerUnit: '32 - 500 g boxes', UnitPrice: 17.45, UnitsInStock: 29, UnitsOnOrder: 0, ReorderLevel: 10, Discontinued: false, Category: { CategoryId: 8, CategoryName: 'Confections', Description: 'Desserts, candies, and sweet breads', }, Supplier: { CompanyName: 'Pavlova, Ltd.', Address: '86 Nw 66th St #8673', Telephone: '913-388-2079', }, }, { ProductID: 17, ProductName: 'Alice Mutton', QuantityPerUnit: '20 - 1 kg tins', UnitPrice: 39.0, UnitsInStock: 0, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: true, Category: { CategoryId: 4, CategoryName: 'Meat/Poultry', Description: 'Prepared meats', }, Supplier: { CompanyName: 'Pavlova, Ltd.', Address: '86 Nw 66th St #8673', Telephone: '913-388-2079', }, }, { ProductID: 18, ProductName: 'Carnarvon Tigers', QuantityPerUnit: '16 kg pkg.', UnitPrice: 62.5, UnitsInStock: 42, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false, Category: { CategoryId: 5, CategoryName: 'Seafood', Description: 'Seaweed and fish', }, Supplier: { CompanyName: 'Pavlova, Ltd.', Address: '86 Nw 66th St #8673', Telephone: '913-388-2079', }, }, { ProductID: 19, ProductName: 'Teatime Chocolate Biscuits', QuantityPerUnit: '10 boxes x 12 pieces', UnitPrice: 9.2, UnitsInStock: 25, UnitsOnOrder: 0, ReorderLevel: 5, Discontinued: false, Category: { CategoryId: 8, CategoryName: 'Confections', Description: 'Desserts, candies, and sweet breads', }, Supplier: { CompanyName: 'Specialty Biscuits, Ltd.', Address: '74874 Atlantic Ave', Telephone: '614-801-9788', }, }, { ProductID: 20, ProductName: "Sir Rodney's Marmalade", QuantityPerUnit: '30 gift boxes', UnitPrice: 81.0, UnitsInStock: 40, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false, Category: { CategoryId: 8, CategoryName: 'Confections', Description: 'Desserts, candies, and sweet breads', }, Supplier: { CompanyName: 'Specialty Biscuits, Ltd.', Address: '74874 Atlantic Ave', Telephone: '614-801-9788', }, }, ];
.gc-row .c0 { font-size: 25px; } .gc-row { font-size: 12px; } .gc-row .c1 { font-weight: bold; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd1RlbXBsYXRlcy9NdWx0aXBsZVJvdy9hbmd1bGFyL3N0eWxlcy5zY3NzIiwiRmVhdHVyZXMvUm93VGVtcGxhdGVzL011bHRpcGxlUm93L2FuZ3VsYXIvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGVBQUE7QUNDRjs7QURFQTtFQUNFLGVBQUE7QUNDRjs7QURFQTtFQUNFLGlCQUFBO0FDQ0YiLCJmaWxlIjoiRmVhdHVyZXMvUm93VGVtcGxhdGVzL011bHRpcGxlUm93L2FuZ3VsYXIvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5nYy1yb3cgLmMwIHtcbiAgZm9udC1zaXplOiAyNXB4O1xufVxuXG4uZ2Mtcm93IHtcbiAgZm9udC1zaXplOiAxMnB4O1xufVxuXG4uZ2Mtcm93IC5jMSB7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xufVxuIiwiLmdjLXJvdyAuYzAge1xuICBmb250LXNpemU6IDI1cHg7XG59XG5cbi5nYy1yb3cge1xuICBmb250LXNpemU6IDEycHg7XG59XG5cbi5nYy1yb3cgLmMxIHtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG59Il19 */
{ "compileOnSave": true, "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "noImplicitAny": false, "suppressImplicitAnyIndexErrors": true, "lib": ["es2018", "dom"], "noEmit": true, "forceConsistentCasingInFileNames": true, "downlevelIteration": true } }
(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.12'}), '@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.12'}), '@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.12'}), '@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.12'}), '@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.12'}), '@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.12'}), '@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.12'}), '@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.12'}), '@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.12'}), '@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.12'}), '@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.12'}), '@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.12'}), '@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.12'}), '@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.12'}), // 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);