import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import '@angular/compiler';
import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import * as wjcGrid from '@grapecity/wijmo.grid';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { DataService } from './app.data';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
protected dataSvc: DataService;
data: any[];
// references FlexGrid named 'flex' in the view
@ViewChild('flex', { static: true }) flex: wjcGrid.FlexGrid;
// DataSvc will be passed by derived classes
constructor( @Inject(DataService) dataSvc: DataService) {
this.dataSvc = dataSvc;
this.data = dataSvc.getData(500);
}
}
//
@NgModule({
imports: [WjGridModule, BrowserModule],
declarations: [AppComponent],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule {
}
//
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo FlexGrid Column Width</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="container-fluid">
<h4>
Example 1:
</h4>
<p>
This grid has four columns. The first is 80 pixels wide and can be resized between
40 and 160 pixels. The other three have widths of 2*, *, and *, and cannot be
resized using the mouse.
</p>
<p>
Notice that the second column is twice as wide as the third and fourth columns, and that
they keep these proportions even as you resize the first column or the whole grid.
</p>
<wj-flex-grid class="grid" [itemsSource]="data" [autoClipboard]="false">
<wj-flex-grid-column [header]="'Date'" [binding]="'start'" [width]="80" [minWidth]="40" [maxWidth]="160"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Product'" [binding]="'product'" [width]="'2*'" [allowResizing]="false"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'" [width]="'*'" [allowResizing]="false"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Expense'" [binding]="'amount2'" [format]="'n0'" [width]="'*'" [allowResizing]="false"></wj-flex-grid-column>
</wj-flex-grid>
<br />
<br />
<h4>
Example 2:
</h4>
<p>
This grid shows how you can make any column stretch to fill the available space. In this case,
we set the width of the second column to * to achieve that effect.
</p>
<p>
We also set the minimum width of the second column to 100 pixels in order to prevent it from
getting too narrow when the other columns in the grid are resized, and we prevent users from
resizing this column with the mouse.
</p>
<wj-flex-grid class="grid" [itemsSource]="data" [autoClipboard]="false">
<wj-flex-grid-column [header]="'Date'" [binding]="'start'" [width]="80"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Product'" [binding]="'product'" [width]="'*'" [minWidth]="100" [allowResizing]="false"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'" [width]="120"></wj-flex-grid-column>
</wj-flex-grid>
<br />
<br />
<h4>
Example 3:
</h4>
<p>
This example sets all widths to *, which means the space available is divided equally among them.
Resize the browser and notice how the grid resizes and the columns fill it up equally.
</p>
<p>
Also, unlike the other examples, this one sets the allowResizing property of the entire grid rather
than an individual column. We set this one to None, but you may also choose Columns, Rows, or Both.
</p>
<wj-flex-grid class="grid" [allowResizing]="'None'" [itemsSource]="data" [autoClipboard]="false">
<wj-flex-grid-column [header]="'Date'" [binding]="'start'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Product'" [binding]="'product'" [width]="'*'" [minWidth]="100"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Expense'" [binding]="'amount2'" [format]="'n0'" [width]="'*'"></wj-flex-grid-column>
</wj-flex-grid>
</div>
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
// data used to generate random items
private _products = ['Widget', 'Gadget', 'Doohickey'];
private _colors = ['Black', 'White', 'Red', 'Green', 'Blue'];
private _someCountries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'];
getCountries(): string[] {
return this._someCountries;
}
getProducts(): string[] {
return this._products;
}
getColors(): string[] {
return this._colors;
}
// get matches for a search term
getData(count: number): any[] {
var data = [];
var dt = new Date();
// add count items
for (var i = 0; i < count; i++) {
// constants used to create data items
var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
countryId = Math.floor(Math.random() * this._someCountries.length),
productId = Math.floor(Math.random() * this._products.length),
colorId = Math.floor(Math.random() * this._colors.length);
// create the item
var item = {
id: i,
start: date,
end: new Date(date.getTime() + Math.random() * 30 * (24 * 60 * 60 * 1000)),
country: this._someCountries[countryId],
product: this._products[productId],
color: this._colors[colorId],
countryId: countryId,
productId: productId,
colorId: colorId,
amount: Math.random() * 10000 - 5000,
amount2: Math.random() * 10000 - 5000,
discount: Math.random() / 4,
active: i % 4 == 0
};
// add the item to the list
data.push(item);
}
return data;
}
}
.wj-flexgrid {
height: 400px;
margin: 6px 0;
}
(function (global) {
SystemJS.config({
transpiler: './plugin-typescript.js',
typescriptOptions: {
"target": "ES2022",
"module": "system",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
},
baseURL: 'node_modules/',
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'systemjs-plugin-css' }
},
paths: {
// paths serve as alias
'npm:': ''
},
packageConfigPaths: [
'/node_modules/*/package.json',
"/node_modules/@angular/*/package.json",
"/node_modules/@grapecity/*/package.json"
],
map: {
'core-js': 'https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js',
'typescript': 'https://cdnjs.cloudflare.com/ajax/libs/typescript/5.2.2/typescript.min.js',
"rxjs": "https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js",
'systemjs-plugin-css': 'https://cdn.jsdelivr.net/npm/systemjs-plugin-css@0.1.37/css.js',
'@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js',
'@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js',
'@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles',
'@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures',
'@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js',
'@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js',
'@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js',
'@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js',
'@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js',
'@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js',
'@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js',
'@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js',
'@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js',
'@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js',
'@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js',
'@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js',
'@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js',
'@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js',
'@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js',
'@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js',
'@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js',
'@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js',
'@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js',
'@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js',
'@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js',
'@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js',
'@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js',
'@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js',
'@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js',
'@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js',
'@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js',
'@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js',
'@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js',
'@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js',
'@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js',
'@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js',
'@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js',
'@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js',
'@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js',
'@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js',
'@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js',
'@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js',
'@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js',
'@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js',
'@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js',
'@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js',
"@grapecity/wijmo.angular2.chart.analytics": "npm:@grapecity/wijmo.angular2.chart.analytics/index.js",
"@grapecity/wijmo.angular2.chart.animation": "npm:@grapecity/wijmo.angular2.chart.animation/index.js",
"@grapecity/wijmo.angular2.chart.annotation": "npm:@grapecity/wijmo.angular2.chart.annotation/index.js",
"@grapecity/wijmo.angular2.chart.finance.analytics": "npm:@grapecity/wijmo.angular2.chart.finance.analytics/index.js",
"@grapecity/wijmo.angular2.chart.finance": "npm:@grapecity/wijmo.angular2.chart.finance/index.js",
"@grapecity/wijmo.angular2.chart.hierarchical": "npm:@grapecity/wijmo.angular2.chart.hierarchical/index.js",
"@grapecity/wijmo.angular2.chart.interaction": "npm:@grapecity/wijmo.angular2.chart.interaction/index.js",
"@grapecity/wijmo.angular2.chart.radar": "npm:@grapecity/wijmo.angular2.chart.radar/index.js",
'@grapecity/wijmo.angular2.chart.map': 'npm:@grapecity/wijmo.angular2.chart.map/index.js',
"@grapecity/wijmo.angular2.chart": "npm:@grapecity/wijmo.angular2.chart/index.js",
"@grapecity/wijmo.angular2.core": "npm:@grapecity/wijmo.angular2.core/index.js",
"@grapecity/wijmo.angular2.gauge": "npm:@grapecity/wijmo.angular2.gauge/index.js",
"@grapecity/wijmo.angular2.grid.detail": "npm:@grapecity/wijmo.angular2.grid.detail/index.js",
"@grapecity/wijmo.angular2.grid.filter": "npm:@grapecity/wijmo.angular2.grid.filter/index.js",
"@grapecity/wijmo.angular2.grid.grouppanel": "npm:@grapecity/wijmo.angular2.grid.grouppanel/index.js",
"@grapecity/wijmo.angular2.grid.search": "npm:@grapecity/wijmo.angular2.grid.search/index.js",
"@grapecity/wijmo.angular2.grid.multirow": "npm:@grapecity/wijmo.angular2.grid.multirow/index.js",
"@grapecity/wijmo.angular2.grid.sheet": "npm:@grapecity/wijmo.angular2.grid.sheet/index.js",
'@grapecity/wijmo.angular2.grid.transposed': 'npm:@grapecity/wijmo.angular2.grid.transposed/index.js',
'@grapecity/wijmo.angular2.grid.transposedmultirow': 'npm:@grapecity/wijmo.angular2.grid.transposedmultirow/index.js',
"@grapecity/wijmo.angular2.grid": "npm:@grapecity/wijmo.angular2.grid/index.js",
"@grapecity/wijmo.angular2.input": "npm:@grapecity/wijmo.angular2.input/index.js",
"@grapecity/wijmo.angular2.olap": "npm:@grapecity/wijmo.angular2.olap/index.js",
"@grapecity/wijmo.angular2.viewer": "npm:@grapecity/wijmo.angular2.viewer/index.js",
"@grapecity/wijmo.angular2.nav": "npm:@grapecity/wijmo.angular2.nav/index.js",
"@grapecity/wijmo.angular2.directivebase": "npm:@grapecity/wijmo.angular2.directivebase/index.js",
'@grapecity/wijmo.angular2.barcode.common': 'npm:@grapecity/wijmo.angular2.barcode.common/index.js',
'@grapecity/wijmo.angular2.barcode.composite': 'npm:@grapecity/wijmo.angular2.barcode.composite/index.js',
'@grapecity/wijmo.angular2.barcode.specialized': 'npm:@grapecity/wijmo.angular2.barcode.specialized/index.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'jszip': 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js',
"@angular/common/http": "https://cdn.jsdelivr.net/npm/@angular/common@16.2.6/fesm2022/http.mjs",
"@angular/core": "https://cdn.jsdelivr.net/npm/@angular/core@16.2.6/fesm2022/core.mjs",
"@angular/platform-browser": "https://cdn.jsdelivr.net/npm/@angular/platform-browser@16.2.6/fesm2022/platform-browser.mjs",
"@angular/common": "https://cdn.jsdelivr.net/npm/@angular/common@16.2.6/fesm2022/common.mjs",
"@angular/compiler": "https://cdn.jsdelivr.net/npm/@angular/compiler@16.2.6/fesm2022/compiler.mjs",
"@angular/forms": "https://cdn.jsdelivr.net/npm/@angular/forms@16.2.6/fesm2022/forms.mjs",
"@angular/localize": "https://cdn.jsdelivr.net/npm/@angular/localize@16.2.6/fesm2022/localize.mjs",
"@angular/platform-browser-dynamic": "https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@16.2.6/fesm2022/platform-browser-dynamic.mjs",
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
"./src": {
defaultExtension: 'ts'
},
"node_modules": {
defaultExtension: 'js'
},
wijmo: {
defaultExtension: 'js',
}
}
});
})(this);
