Auto Row Height | Features | MESCIUS DataViewsJS Angular Demos

The row height can be automatically adjusted based on the row's content. This example demonstrates the DataViews automatic row height feature. In many cases, usually when using images, a grid row needs to be sized to accommodate its content. When you set the autoRowHeight property to true, DataViews calculates and sets the row height dynamically according to the row's content. This is useful when trying to conserve space on a page, and doesn't require manually setting the height for each row.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Rows/AutoRowHeight/angular/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="rows, row height, rowheight, autorowheight, auto height" />
<meta
name="description"
content="The row height can be automatically adjusted based on the row&#x27;s content.  This example demonstrates the DataViews automatic row height feature."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Auto Row Height | 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>
<app-root></app-root>
<script type="text/javascript">
System.import('./app.ts');
</script>
</body>
</html>

<div class="main-container">
<gc-dataview id="grid" class="grid" [data]="data" [cols]="cols" [layout]="layout" autoFocus></gc-dataview>
<div class="product-total">
<div class="product-total-inner">
{{ locale.total }} ({{ count }} {{ locale.items }}): + <span>{{ dollar }}{{ total }}</span>
</div>
</div>
</div>

import { Component } from '@angular/core';
import { getControlByElement } from '@grapecity/dataviews.core';
import { GridLayout } from '@grapecity/dataviews.grid';
import { data } from './data';
import locale from './locale';
const presenter =
'<div class="container">' +
'<div class="photo"><img src={{=it.photo}} /></div>' +
'<div class="name">{{=it.name}}</div>' +
'</div>';
const cols = [
{ id: 'photo', caption: 'Photo', dataField: 'photo' },
{ id: 'name', caption: 'Name', dataField: 'name' },
{
id: 'income',
caption: 'Income',
dataField: 'income',
format: '$#,###',
},
{ id: 'info', dataField: 'photo,name', presenter },
];
const rowTemplate = `<div class="rowDiv" style ="width:100%;height:100%;">
<div class="productDiv" data-column="info"></div>
<div class="incomeDiv c2"> <div class="container"> <span class="incomeSpan" data-column="income"></span> </div> </div>
</div>`;
const formatter = new GC.DataViews.GeneralFormatter('#,###');
const layout = new GridLayout({
autoRowHeight: true,
showColHeader: false,
showRowHeader: false,
selectionMode: 'none',
rowTemplate,
});
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})
export class AppComponent {
readonly dollar = '$';
locale = locale;
data = data;
cols = cols;
layout = layout;
get count() {
const dataView = getControlByElement(document.body);
return dataView ? dataView.data.evaluate('count([income])') : 0;
}
get total() {
const dataView = getControlByElement(document.body);
if (!dataView) {
return '0';
}
const val = dataView.data.evaluate('sum([income])');
return formatter.format(val);
}
}

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));

const SITE_ROOT = window.process.env.SITE_ROOT;
export const data = [
{
photo: SITE_ROOT + '/images/others.png',
name: 'Other Products',
income: 2641000000,
},
{
photo: SITE_ROOT + '/images/ipad.png',
name: 'iPad',
income: 4538000000,
},
{
photo: SITE_ROOT + '/images/service.png',
name: 'Services',
income: 5028000000,
},
{
photo: SITE_ROOT + '/images/mac.png',
name: 'Mac',
income: 6030000000,
},
{
photo: SITE_ROOT + '/images/iphone.png',
name: 'iPhone',
income: 31368000000,
},
];

export default { total: 'Total', items: 'items' };

.main-container {
height: 380px;
width: 100%;
}
.grid {
height: 100%;
width: 100%;
}
.gc-grid {
border: 0;
}
.c2,
.c3 {
color: #fff;
font-size: 22px;
}
.r0 .c2 {
background-color: #603e50;
}
.r1 .c2 {
background-color: #695877;
}
.r2 .c2 {
background-color: #73738e;
}
.r3 .c2 {
background-color: #7c9eaa;
}
.r4 .c2 {
background-color: #8fc8c9;
}
.r0 .c3 {
background-color: #533747;
}
.r1 .c3 {
background-color: #5f506b;
}
.r2 .c3 {
background-color: #6a6b83;
}
.r3 .c3 {
background-color: #76949f;
}
.r4 .c3 {
background-color: #86bbbd;
}
.rowDiv {
display: table;
table-layout: fixed;
width: 100%;
}
.productDiv,
.incomeDiv {
border: 0;
display: table-cell;
height: 100%;
padding: 0.4em 1em;
vertical-align: middle;
}
.incomeSpan {
border: 0;
display: block;
padding: 0;
}
.photo,
.name {
display: inline-block;
vertical-align: middle;
}
.photo {
margin-right: 1em;
position: relative;
text-align: center;
top: 4px;
width: 100px;
}
.product-total {
font-size: 1.2rem;
margin-top: 1em;
text-align: right;
}
.product-total .product-total-inner {
background: #f1f1f1;
border-radius: 24px;
color: #333;
display: inline-block;
padding: 0.4em 1em;
}
.product-total .product-total-inner span {
font-weight: 700;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd3MvQXV0b1Jvd0hlaWdodC9hbmd1bGFyL3N0eWxlcy5zY3NzIiwiRmVhdHVyZXMvUm93cy9BdXRvUm93SGVpZ2h0L2FuZ3VsYXIvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQUE7RUFDQSxXQUFBO0FDQ0Y7O0FERUE7RUFDRSxZQUFBO0VBQ0EsV0FBQTtBQ0NGOztBREVBO0VBQ0UsU0FBQTtBQ0NGOztBREVBOztFQUVFLFdBQUE7RUFDQSxlQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UsY0FBQTtFQUNBLG1CQUFBO0VBQ0EsV0FBQTtBQ0NGOztBREVBOztFQUVFLFNBQUE7RUFDQSxtQkFBQTtFQUNBLFlBQUE7RUFDQSxrQkFBQTtFQUNBLHNCQUFBO0FDQ0Y7O0FERUE7RUFDRSxTQUFBO0VBQ0EsY0FBQTtFQUNBLFVBQUE7QUNDRjs7QURFQTs7RUFFRSxxQkFBQTtFQUNBLHNCQUFBO0FDQ0Y7O0FERUE7RUFDRSxpQkFBQTtFQUNBLGtCQUFBO0VBQ0Esa0JBQUE7RUFDQSxRQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsaUJBQUE7RUFDQSxlQUFBO0VBQ0EsaUJBQUE7QUNDRjtBRENFO0VBQ0UsbUJBQUE7RUFDQSxtQkFBQTtFQUNBLFdBQUE7RUFDQSxxQkFBQTtFQUNBLGtCQUFBO0FDQ0o7QURDSTtFQUNFLGdCQUFBO0FDQ04iLCJmaWxlIjoiRmVhdHVyZXMvUm93cy9BdXRvUm93SGVpZ2h0L2FuZ3VsYXIvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMzgwcHg7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5nYy1ncmlkIHtcbiAgYm9yZGVyOiAwO1xufVxuXG4uYzIsXG4uYzMge1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAyMnB4O1xufVxuXG4ucjAgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzYwM2U1MDtcbn1cblxuLnIxIC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2OTU4Nzc7XG59XG5cbi5yMiAuYzIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzM3MzhlO1xufVxuXG4ucjMgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzdjOWVhYTtcbn1cblxuLnI0IC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM4ZmM4Yzk7XG59XG5cbi5yMCAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTMzNzQ3O1xufVxuXG4ucjEgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzVmNTA2Yjtcbn1cblxuLnIyIC5jMyB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2YTZiODM7XG59XG5cbi5yMyAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzY5NDlmO1xufVxuXG4ucjQgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzg2YmJiZDtcbn1cblxuLnJvd0RpdiB7XG4gIGRpc3BsYXk6IHRhYmxlO1xuICB0YWJsZS1sYXlvdXQ6IGZpeGVkO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLnByb2R1Y3REaXYsXG4uaW5jb21lRGl2IHtcbiAgYm9yZGVyOiAwO1xuICBkaXNwbGF5OiB0YWJsZS1jZWxsO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDAuNGVtIDFlbTtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLmluY29tZVNwYW4ge1xuICBib3JkZXI6IDA7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwYWRkaW5nOiAwO1xufVxuXG4ucGhvdG8sXG4ubmFtZSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLnBob3RvIHtcbiAgbWFyZ2luLXJpZ2h0OiAxZW07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICB0b3A6IDRweDtcbiAgd2lkdGg6IDEwMHB4O1xufVxuXG4ucHJvZHVjdC10b3RhbCB7XG4gIGZvbnQtc2l6ZTogMS4ycmVtO1xuICBtYXJnaW4tdG9wOiAxZW07XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xuXG4gIC5wcm9kdWN0LXRvdGFsLWlubmVyIHtcbiAgICBiYWNrZ3JvdW5kOiAjZjFmMWYxO1xuICAgIGJvcmRlci1yYWRpdXM6IDI0cHg7XG4gICAgY29sb3I6ICMzMzM7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHBhZGRpbmc6IDAuNGVtIDFlbTtcblxuICAgIHNwYW4ge1xuICAgICAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgICB9XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMzgwcHg7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5nYy1ncmlkIHtcbiAgYm9yZGVyOiAwO1xufVxuXG4uYzIsXG4uYzMge1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAyMnB4O1xufVxuXG4ucjAgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzYwM2U1MDtcbn1cblxuLnIxIC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2OTU4Nzc7XG59XG5cbi5yMiAuYzIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzM3MzhlO1xufVxuXG4ucjMgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzdjOWVhYTtcbn1cblxuLnI0IC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM4ZmM4Yzk7XG59XG5cbi5yMCAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTMzNzQ3O1xufVxuXG4ucjEgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzVmNTA2Yjtcbn1cblxuLnIyIC5jMyB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2YTZiODM7XG59XG5cbi5yMyAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzY5NDlmO1xufVxuXG4ucjQgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzg2YmJiZDtcbn1cblxuLnJvd0RpdiB7XG4gIGRpc3BsYXk6IHRhYmxlO1xuICB0YWJsZS1sYXlvdXQ6IGZpeGVkO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLnByb2R1Y3REaXYsXG4uaW5jb21lRGl2IHtcbiAgYm9yZGVyOiAwO1xuICBkaXNwbGF5OiB0YWJsZS1jZWxsO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDAuNGVtIDFlbTtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLmluY29tZVNwYW4ge1xuICBib3JkZXI6IDA7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwYWRkaW5nOiAwO1xufVxuXG4ucGhvdG8sXG4ubmFtZSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLnBob3RvIHtcbiAgbWFyZ2luLXJpZ2h0OiAxZW07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICB0b3A6IDRweDtcbiAgd2lkdGg6IDEwMHB4O1xufVxuXG4ucHJvZHVjdC10b3RhbCB7XG4gIGZvbnQtc2l6ZTogMS4ycmVtO1xuICBtYXJnaW4tdG9wOiAxZW07XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xufVxuLnByb2R1Y3QtdG90YWwgLnByb2R1Y3QtdG90YWwtaW5uZXIge1xuICBiYWNrZ3JvdW5kOiAjZjFmMWYxO1xuICBib3JkZXItcmFkaXVzOiAyNHB4O1xuICBjb2xvcjogIzMzMztcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBwYWRkaW5nOiAwLjRlbSAxZW07XG59XG4ucHJvZHVjdC10b3RhbCAucHJvZHVjdC10b3RhbC1pbm5lciBzcGFuIHtcbiAgZm9udC13ZWlnaHQ6IDcwMDtcbn0iXX0= */

(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);

Auto Row Height (Angular)

Feedback