示例
可折叠列头
默认情况下，MultiRow 控件创建跨越多行的列标题，并显示 layoutDefinition 中定义的每个单元格的标题。
这些特定于单元格的列标题可用于对传统网格中的数据进行排序或过滤。
在某些情况下，您可能希望将列标题折叠为单行，仅显示组名而不是单个单元格。 这样可以节省空间，但需要使用单独的单元头。 要折叠列标题，请将 collapsedHeaders 属性设置为true。 在这些情况下，请记住在组上设置 header 属性以避免空列标题。
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjInput from '@grapecity/wijmo.input';
import * as wjMultiRow from '@grapecity/wijmo.grid.multirow';
import { generateAppData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
let appData = generateAppData();
let chMultirow = new wjMultiRow.MultiRow('#chMultirow', {
itemsSource: appData.orders,
layoutDefinition: appData.ldThreeLines,
collapsedHeaders: true,
showHeaderCollapseButton: true,
collapsedHeadersChanged: function (s, e) {
cbCollapsedHeaders.selectedValue = s.collapsedHeaders;
}
});
// handle combo
let cbCollapsedHeaders = new wjInput.ComboBox('#cbCollapsedHeaders', {
displayMemberPath: 'name',
selectedValuePath: 'value',
itemsSource: [
{ name: 'true', value: true },
{ name: 'false', value: false },
{ name: 'null', value: null }
],
selectedValue: chMultirow.collapsedHeaders,
selectedIndexChanged: function (s, e) {
chMultirow.collapsedHeaders = s.selectedValue;
}
});
// handle checkbox
document.getElementById('cbshowHeaderCollapseButton').addEventListener('click', function (e) {
chMultirow.showHeaderCollapseButton = e.target.checked;
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo MultiRow Collapsible Column Headers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div id="chMultirow"></div>
<div>
<label for="cbCollapsedHeaders">
Collapsed Headers
<div id="cbCollapsedHeaders"></div>
</label>
<label for="cbshowHeaderCollapseButton">
Show Header Collapse Button
<input type="checkbox" checked id="cbshowHeaderCollapseButton">
</label>
</div>
</div>
</body>
</html>
import * as wjCore from '@grapecity/wijmo';
import * as wjGrid from '@grapecity/wijmo.grid';
export function generateAppData() {
// create some data
let appData = {}, customers = [], firstNames = 'Aaron,Paul,John,Mark,Sue,Tom,Bill,Joe,Tony,Brad,Frank,Chris,Pat'.split(','), lastNames = 'Smith,Johnson,Richards,Bannon,Wong,Peters,White,Brown,Adams,Jennings'.split(','), cities = 'York,Paris,Rome,Cairo,Florence,Sidney,Hamburg,Vancouver'.split(','), states = 'SP,RS,RN,SC,CS,RT,BC'.split(',');
for (let i = 0; i < 50; i++) {
let first = firstNames[randBetween(0, firstNames.length - 1)], last = lastNames[randBetween(0, lastNames.length - 1)];
customers.push({
id: i,
name: first + ' ' + last,
address: randBetween(100, 10000) + ' ' + lastNames[randBetween(0, lastNames.length - 1)] + ' St.',
city: cities[randBetween(0, cities.length - 1)],
state: states[randBetween(0, states.length - 1)],
zip: wjCore.format('{p1:d5}-{p2:d3}', {
p1: randBetween(10000, 99999),
p2: randBetween(100, 999)
}),
email: first + '.' + last + '@gmail.com',
phone: wjCore.format('{p1:d3}-{p2:d4}', {
p1: randBetween(100, 999),
p2: randBetween(1000, 9999)
})
});
}
let cityMap = new wjGrid.DataMap(cities);
let shippers = [
{ id: 0, name: 'Speedy Express', email: 'speedy@gmail.com', phone: '431-3234', express: true },
{ id: 1, name: 'Flash Delivery', email: 'flash@gmail.com', phone: '431-6563', express: true },
{ id: 2, name: 'Logitrax', email: 'logitrax@gmail.com', phone: '431-3981', express: false },
{ id: 3, name: 'Acme Inc', email: 'acme@gmail.com', phone: '431-3113', express: false }
];
let orders = [];
let today = new Date();
for (let i = 0; i < 20; i++) {
let shipped = wjCore.DateTime.addDays(today, -randBetween(1, 3000));
orders.push({
id: i,
date: wjCore.DateTime.addDays(shipped, -randBetween(1, 5)),
shippedDate: shipped,
amount: randBetween(10000, 500000) / 100,
customer: customers[randBetween(0, customers.length - 1)],
shipper: shippers[randBetween(0, shippers.length - 1)]
});
}
function randBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// expose orders CollectionView to the app
appData.orders = new wjCore.CollectionView(orders);
// expose grouped orders CollectionView to the app
appData.groupedOrders = new wjCore.CollectionView(orders, {
groupDescriptions: [
'customer.city'
]
});
// expose paged orders CollectionView to the app
appData.pagedOrders = new wjCore.CollectionView(orders, {
pageSize: 4
});
// expose addNew oders CollectionView to the app
appData.addNewOrders = new wjCore.CollectionView(orders, {
newItemCreator: function () {
return {
customer: {},
shipper: {}
};
},
});
appData.addNewOrders.moveCurrentToLast();
// refresh views when data source changes
let ordersRefreshing = false;
appData.orders.collectionChanged.addHandler(function () {
ordersRefreshing = true;
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
ordersRefreshing = false;
});
// addNew orders
let addNewOrdersRefreshing = false;
appData.addNewOrders.collectionChanged.addHandler(function () {
addNewOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
addNewOrdersRefreshing = false;
});
// grouped orders
let groupedOrdersRefreshing = false;
appData.groupedOrders.collectionChanged.addHandler(function () {
groupedOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
groupedOrdersRefreshing = false;
});
// paged orders
let pagedOrdersRefreshing = false;
appData.pagedOrders.collectionChanged.addHandler(function () {
pagedOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
pagedOrdersRefreshing = false;
});
// sample layout definitions
appData.ldOneLine = [
{ cells: [{ binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true }] },
{ cells: [{ binding: 'date', header: 'Ordered' }] },
{ cells: [{ binding: 'shippedDate', header: 'Shipped' }] },
{ cells: [{ binding: 'amount', header: 'Amount', format: 'c', cssClass: 'amount' }] },
{ cells: [{ binding: 'customer.name', header: 'Customer' }] },
{ cells: [{ binding: 'customer.address', header: 'Address', wordWrap: true }] },
{ cells: [{ binding: 'customer.city', header: 'City', dataMap: cityMap }] },
{ cells: [{ binding: 'customer.state', header: 'State', width: 45 }] },
{ cells: [{ binding: 'customer.zip', header: 'Zip' }] },
{ cells: [{ binding: 'customer.email', header: 'Customer Email', cssClass: 'email' }] },
{ cells: [{ binding: 'customer.phone', header: 'Customer Phone' }] },
{ cells: [{ binding: 'shipper.name', header: 'Shipper' }] },
{ cells: [{ binding: 'shipper.email', header: 'Shipper Email', cssClass: 'email' }] },
{ cells: [{ binding: 'shipper.phone', header: 'Shipper Phone' }] },
{ cells: [{ binding: 'shipper.express', header: 'Express' }] }
];
appData.ldTwoLines = [
{
header: 'Order', colspan: 2, cells: [
{ binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true },
{ binding: 'date', header: 'Ordered' },
{ binding: 'amount', header: 'Amount', format: 'c', cssClass: 'amount' },
{ binding: 'shippedDate', header: 'Shipped' }
]
},
{
header: 'Customer', colspan: 3, cells: [
{ binding: 'customer.name', header: 'Name' },
{ binding: 'customer.email', header: 'EMail', colspan: 2, cssClass: 'email' },
{ binding: 'customer.address', header: 'Address' },
{ binding: 'customer.city', header: 'City', dataMap: cityMap },
{ binding: 'customer.state', header: 'State', width: 45 }
]
},
{
header: 'Shipper', cells: [
{ binding: 'shipper.name', header: 'Shipper', colspan: 2 },
{ binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
{ binding: 'shipper.express', header: 'Express' }
]
}
];
appData.ldThreeLines = [
{
header: 'Order', colspan: 2, cells: [
{ binding: 'id', header: 'ID', colspan: 2, cssClass: 'id' },
{ binding: 'amount', header: 'Amount', format: 'c', colspan: 2, cssClass: 'amount' },
{ binding: 'date', header: 'Ordered' },
{ binding: 'shippedDate', header: 'Shipped' }
]
},
{
header: 'Customer', colspan: 3, cells: [
{ binding: 'customer.name', header: 'Name' },
{ binding: 'customer.email', header: 'EMail', colspan: 2, cssClass: 'email' },
{ binding: 'customer.address', header: 'Address', colspan: 2 },
{ binding: 'customer.phone', header: 'Phone' },
{ binding: 'customer.city', header: 'City', dataMap: cityMap },
{ binding: 'customer.state', header: 'State', width: 45 },
{ binding: 'customer.zip', header: 'Zip' },
]
},
{
header: 'Shipper', cells: [
{ binding: 'shipper.name', header: 'Shipper' },
{ binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
{ binding: 'shipper.express', header: 'Express' }
]
}
];
appData.layoutDefs = new wjCore.CollectionView([
{
name: 'Traditional',
description: 'Traditional grid view, with one row per record. The user must scroll horizontally to see the whole record.',
def: appData.ldOneLine
},
{
name: 'Compact',
description: 'This view uses two rows per record. The layout is divided into three groups: order, customer, and shipper',
def: appData.ldTwoLines
},
{
name: 'Detailed',
description: 'This view uses three rows per record. The layout is divided into three groups: order, customer, and shipper',
def: appData.ldThreeLines
}
]);
return appData;
}
.wj-multirow {
height: 400px;
width: 600px;
margin: 6px 0;
}
.wj-combobox {
width: 120px;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as wjInput from '@grapecity/wijmo.input';
import * as wjMultirow from '@grapecity/wijmo.grid.multirow';
import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjInputModule } from '@grapecity/wijmo.angular2.input';
import { WjGridMultirowModule } from '@grapecity/wijmo.angular2.grid.multirow';
import { DataService } from './app.data';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
@ViewChild('chMultirow') chMultirow: wjMultirow.MultiRow;
@ViewChild('cbCollapsedHeaders') cbCollapsedHeaders: wjInput.ComboBox;
orders: any;
threeLines: any;
cbCollapsedHeadersSource: any;
// DataSvc will be passed by derived classes
constructor(@Inject(DataService) private dataService: DataService) {
let appData = dataService.getData();
this.orders = appData.orders;
this.threeLines = appData.ldThreeLines;
this.cbCollapsedHeadersSource = [
{ name: 'true', value: true },
{ name: 'false', value: false },
{ name: 'null', value: null }
];
}
//
collapsedHeadersChanged() {
this.cbCollapsedHeaders.selectedValue = this.chMultirow.collapsedHeaders;
}
//
selectedIndexChanged() {
this.chMultirow.collapsedHeaders = this.cbCollapsedHeaders.selectedValue;
}
//
onShowHeaderCollapseButton(e: MouseEvent) {
this.chMultirow.showHeaderCollapseButton = (<HTMLInputElement>e.target).checked;
}
}
//\\
@NgModule({
imports: [WjGridMultirowModule, WjInputModule, 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>GrapeCity Wijmo MultiRow Collapsible Column Headers</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/dist/zone.min.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.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">
<wj-multi-row #chMultirow [itemsSource]="orders" [layoutDefinition]="threeLines" [collapsedHeaders]=true
[showHeaderCollapseButton]=true (collapsedHeadersChanged)="collapsedHeadersChanged()"></wj-multi-row>
<div>
<label for="cbCollapsedHeaders">
Collapsed Headers
<wj-combo-box #cbCollapsedHeaders [displayMemberPath]="'name'" [selectedValuePath]="'value'"
[itemsSource]="cbCollapsedHeadersSource" [(selectedValue)]="chMultirow.collapsedHeaders" (selectedIndexChanged)="selectedIndexChanged()">
</wj-combo-box>
</label>
<label for="cbshowHeaderCollapseButton">
Show Header Collapse Button
<input type="checkbox" checked (click)="onShowHeaderCollapseButton($event)">
</label>
</div>
</div>
import { Injectable } from '@angular/core';
import * as wjCore from '@grapecity/wijmo';
import * as wjGrid from '@grapecity/wijmo.grid';
interface Cell {
binding: string;
header: string;
cssClass?: string;
format?: string;
isReadOnly?: boolean;
wordWrap?: boolean;
width: number;
}
interface Line {
Cells: Cell[];
header?: string;
colspan?: number;
}
export interface AppData {
orders: wjCore.CollectionView;
groupedOrders: wjCore.CollectionView;
pagedOrders: wjCore.CollectionView;
addNewOrders: wjCore.CollectionView;
ldOneLine: Cell[];
ldTwoLines: Line[];
ldThreeLines: Line[];
layoutDefs: wjCore.CollectionView;
}
@Injectable()
export class DataService {
getData(): AppData {
// create some data
let appData: any = {},
customers = [],
firstNames = 'Aaron,Paul,John,Mark,Sue,Tom,Bill,Joe,Tony,Brad,Frank,Chris,Pat'.split(','),
lastNames = 'Smith,Johnson,Richards,Bannon,Wong,Peters,White,Brown,Adams,Jennings'.split(','),
cities = 'York,Paris,Rome,Cairo,Florence,Sidney,Hamburg,Vancouver'.split(','),
states = 'SP,RS,RN,SC,CS,RT,BC'.split(',');
for (let i = 0; i < 50; i++) {
let first = firstNames[randBetween(0, firstNames.length - 1)],
last = lastNames[randBetween(0, lastNames.length - 1)];
customers.push({
id: i,
name: first + ' ' + last,
address: randBetween(100, 10000) + ' ' + lastNames[randBetween(0, lastNames.length - 1)] + ' St.',
city: cities[randBetween(0, cities.length - 1)],
state: states[randBetween(0, states.length - 1)],
zip: wjCore.format('{p1:d5}-{p2:d3}', {
p1: randBetween(10000, 99999),
p2: randBetween(100, 999)
}),
email: first + '.' + last + '@gmail.com',
phone: wjCore.format('{p1:d3}-{p2:d4}', {
p1: randBetween(100, 999),
p2: randBetween(1000, 9999)
})
});
}
let cityMap = new wjGrid.DataMap(cities);
let shippers = [
{ id: 0, name: 'Speedy Express', email: 'speedy@gmail.com', phone: '431-3234', express: true },
{ id: 1, name: 'Flash Delivery', email: 'flash@gmail.com', phone: '431-6563', express: true },
{ id: 2, name: 'Logitrax', email: 'logitrax@gmail.com', phone: '431-3981', express: false },
{ id: 3, name: 'Acme Inc', email: 'acme@gmail.com', phone: '431-3113', express: false }
];
let orders = [];
let today = new Date();
for (let i = 0; i < 20; i++) {
let shipped = wjCore.DateTime.addDays(today, -randBetween(1, 3000));
orders.push({
id: i,
date: wjCore.DateTime.addDays(shipped, -randBetween(1, 5)),
shippedDate: shipped,
amount: randBetween(10000, 500000) / 100,
customer: customers[randBetween(0, customers.length - 1)],
shipper: shippers[randBetween(0, shippers.length - 1)]
});
}
function randBetween(min: number, max: number) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// expose orders CollectionView to the app
appData.orders = new wjCore.CollectionView(orders);
// expose grouped orders CollectionView to the app
appData.groupedOrders = new wjCore.CollectionView(orders, {
groupDescriptions: [
'customer.city'
]
});
// expose paged orders CollectionView to the app
appData.pagedOrders = new wjCore.CollectionView(orders, {
pageSize: 4
});
// expose addNew oders CollectionView to the app
appData.addNewOrders = new wjCore.CollectionView(orders, {
newItemCreator: function () {
return { // add empty customer and shipper objects to new orders
customer: {},
shipper: {}
}
},
});
appData.addNewOrders.moveCurrentToLast();
// refresh views when data source changes
let ordersRefreshing = false;
appData.orders.collectionChanged.addHandler(function () {
ordersRefreshing = true;
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
ordersRefreshing = false;
});
// addNew orders
let addNewOrdersRefreshing = false;
appData.addNewOrders.collectionChanged.addHandler(function () {
addNewOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
addNewOrdersRefreshing = false;
});
// grouped orders
let groupedOrdersRefreshing = false;
appData.groupedOrders.collectionChanged.addHandler(function () {
groupedOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
groupedOrdersRefreshing = false;
});
// paged orders
let pagedOrdersRefreshing = false;
appData.pagedOrders.collectionChanged.addHandler(function () {
pagedOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
pagedOrdersRefreshing = false;
});
// sample layout definitions
appData.ldOneLine = [
{ cells: [{ binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true }] },
{ cells: [{ binding: 'date', header: 'Ordered' }] },
{ cells: [{ binding: 'shippedDate', header: 'Shipped' }] },
{ cells: [{ binding: 'amount', header: 'Amount', format: 'c', cssClass: 'amount' }] },
{ cells: [{ binding: 'customer.name', header: 'Customer' }] },
{ cells: [{ binding: 'customer.address', header: 'Address', wordWrap: true }] },
{ cells: [{ binding: 'customer.city', header: 'City', dataMap: cityMap }] },
{ cells: [{ binding: 'customer.state', header: 'State', width: 45 }] },
{ cells: [{ binding: 'customer.zip', header: 'Zip' }] },
{ cells: [{ binding: 'customer.email', header: 'Customer Email', cssClass: 'email' }] },
{ cells: [{ binding: 'customer.phone', header: 'Customer Phone' }] },
{ cells: [{ binding: 'shipper.name', header: 'Shipper' }] },
{ cells: [{ binding: 'shipper.email', header: 'Shipper Email', cssClass: 'email' }] },
{ cells: [{ binding: 'shipper.phone', header: 'Shipper Phone' }] },
{ cells: [{ binding: 'shipper.express', header: 'Express' }] }
];
appData.ldTwoLines = [
{
header: 'Order', colspan: 2, cells: [
{ binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true },
{ binding: 'date', header: 'Ordered' },
{ binding: 'amount', header: 'Amount', format: 'c', cssClass: 'amount' },
{ binding: 'shippedDate', header: 'Shipped' }
]
},
{
header: 'Customer', colspan: 3, cells: [
{ binding: 'customer.name', header: 'Name' },
{ binding: 'customer.email', header: 'EMail', colspan: 2, cssClass: 'email' },
{ binding: 'customer.address', header: 'Address' },
{ binding: 'customer.city', header: 'City', dataMap: cityMap },
{ binding: 'customer.state', header: 'State', width: 45 }
]
},
{
header: 'Shipper', cells: [
{ binding: 'shipper.name', header: 'Shipper', colspan: 2 },
{ binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
{ binding: 'shipper.express', header: 'Express' }
]
}
];
appData.ldThreeLines = [
{
header: 'Order', colspan: 2, cells: [
{ binding: 'id', header: 'ID', colspan: 2, cssClass: 'id' },
{ binding: 'amount', header: 'Amount', format: 'c', colspan: 2, cssClass: 'amount' },
{ binding: 'date', header: 'Ordered' },
{ binding: 'shippedDate', header: 'Shipped' }
]
},
{
header: 'Customer', colspan: 3, cells: [
{ binding: 'customer.name', header: 'Name' },
{ binding: 'customer.email', header: 'EMail', colspan: 2, cssClass: 'email' },
{ binding: 'customer.address', header: 'Address', colspan: 2 },
{ binding: 'customer.phone', header: 'Phone' },
{ binding: 'customer.city', header: 'City', dataMap: cityMap },
{ binding: 'customer.state', header: 'State', width: 45 },
{ binding: 'customer.zip', header: 'Zip' },
]
},
{
header: 'Shipper', cells: [
{ binding: 'shipper.name', header: 'Shipper' },
{ binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
{ binding: 'shipper.express', header: 'Express' }
]
}
];
appData.layoutDefs = new wjCore.CollectionView([
{
name: 'Traditional',
description: 'Traditional grid view, with one row per record. The user must scroll horizontally to see the whole record.',
def: appData.ldOneLine
},
{
name: 'Compact',
description: 'This view uses two rows per record. The layout is divided into three groups: order, customer, and shipper',
def: appData.ldTwoLines
},
{
name: 'Detailed',
description: 'This view uses three rows per record. The layout is divided into three groups: order, customer, and shipper',
def: appData.ldThreeLines
}
]);
return appData;
}
}
.wj-multirow {
height: 400px;
width: 600px;
margin: 6px 0;
}
.wj-combobox {
width: 120px;
}
<template>
<div class="container-fluid">
<wj-multi-row
id="chMultirow"
:itemsSource="orders"
:layoutDefinition="threeLines"
:collapsedHeaders="true"
:showHeaderCollapseButton="true"
:collapsedHeadersChanged="collapsedHeadersChanged"
:initialized="initializeMultirow"
></wj-multi-row>
<div>
<label for="cbCollapsedHeaders">Collapsed Headers
<wj-combo-box
:displayMemberPath="'name'"
:selectedValuePath="'value'"
:itemsSource="cbCollapsedHeadersSource"
:selectedValue="collapsedHeaders"
:selectedIndexChanged="selectedIndexChanged"
:initialized="initializeCollapsedHeaders"></wj-combo-box>
</label>
<label for="cbshowHeaderCollapseButton">Show Header Collapse Button
<input type="checkbox" checked @click="onShowHeaderCollapseButton($event)">
</label>
</div>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import * as wjMultirow from "@grapecity/wijmo.grid.multirow";
import "@grapecity/wijmo.vue2.grid.multirow";
import { getData } from "./data";
import * as wjInput from '@grapecity/wijmo.input';
import '@grapecity/wijmo.vue2.input';
let App = Vue.extend({
name: "app",
data: function() {
return {
orders: null,
threeLines: null,
cbCollapsedHeadersSource: null,
collapsedHeaders: null
};
},
methods: {
collapsedHeadersChanged: function() {
this.cbCollapsedHeaders.selectedValue = this.chMultirow.collapsedHeaders;
},
selectedIndexChanged: function() {
this.chMultirow.collapsedHeaders = this.cbCollapsedHeaders.selectedValue;
},
onShowHeaderCollapseButton: function(e) {
this.chMultirow.showHeaderCollapseButton = e.target.checked;
},
initializeMultirow: function(chMultirow) {
this.chMultirow = chMultirow;
this.collapsedHeaders = chMultirow.collapsedHeaders;
},
initializeCollapsedHeaders: function(cbCollapsedHeaders) {
this.cbCollapsedHeaders = cbCollapsedHeaders;
}
},
mounted: function() {
let appData = getData();
this.orders = appData.orders;
this.threeLines = appData.ldThreeLines;
this.cbCollapsedHeadersSource = [
{ name: "true", value: true },
{ name: "false", value: false },
{ name: "null", value: null }
];
}
});
new Vue({ render: h => h(App) }).$mount("#app");
</script>
<style>
#chMultirow {
height: 400px;
width: 600px;
margin: 6px 0;
}
.wj-combobox {
width: 120px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo MultiRow Collapsible Column Headers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
import * as wjCore from '@grapecity/wijmo';
import * as wjGrid from '@grapecity/wijmo.grid'
export function getData() {
// create some data
let appData = {},
customers = [],
firstNames = 'Aaron,Paul,John,Mark,Sue,Tom,Bill,Joe,Tony,Brad,Frank,Chris,Pat'.split(','),
lastNames = 'Smith,Johnson,Richards,Bannon,Wong,Peters,White,Brown,Adams,Jennings'.split(','),
cities = 'York,Paris,Rome,Cairo,Florence,Sidney,Hamburg,Vancouver'.split(','),
states = 'SP,RS,RN,SC,CS,RT,BC'.split(',');
for (let i = 0; i < 50; i++) {
let first = firstNames[randBetween(0, firstNames.length - 1)],
last = lastNames[randBetween(0, lastNames.length - 1)];
customers.push({
id: i,
name: first + ' ' + last,
address: randBetween(100, 10000) + ' ' + lastNames[randBetween(0, lastNames.length - 1)] + ' St.',
city: cities[randBetween(0, cities.length - 1)],
state: states[randBetween(0, states.length - 1)],
zip: wjCore.format('{p1:d5}-{p2:d3}', {
p1: randBetween(10000, 99999),
p2: randBetween(100, 999)
}),
email: first + '.' + last + '@gmail.com',
phone: wjCore.format('{p1:d3}-{p2:d4}', {
p1: randBetween(100, 999),
p2: randBetween(1000, 9999)
})
});
}
let cityMap = new wjGrid.DataMap(cities);
let shippers = [
{ id: 0, name: 'Speedy Express', email: 'speedy@gmail.com', phone: '431-3234', express: true },
{ id: 1, name: 'Flash Delivery', email: 'flash@gmail.com', phone: '431-6563', express: true },
{ id: 2, name: 'Logitrax', email: 'logitrax@gmail.com', phone: '431-3981', express: false },
{ id: 3, name: 'Acme Inc', email: 'acme@gmail.com', phone: '431-3113', express: false }
];
let orders = [];
let today = new Date();
for (let i = 0; i < 20; i++) {
let shipped = wjCore.DateTime.addDays(today, -randBetween(1, 3000));
orders.push({
id: i,
date: wjCore.DateTime.addDays(shipped, -randBetween(1, 5)),
shippedDate: shipped,
amount: randBetween(10000, 500000) / 100,
customer: customers[randBetween(0, customers.length - 1)],
shipper: shippers[randBetween(0, shippers.length - 1)]
});
}
function randBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// expose orders CollectionView to the app
appData.orders = new wjCore.CollectionView(orders);
// expose grouped orders CollectionView to the app
appData.groupedOrders = new wjCore.CollectionView(orders, {
groupDescriptions: [
'customer.city'
]
});
// expose paged orders CollectionView to the app
appData.pagedOrders = new wjCore.CollectionView(orders, {
pageSize: 4
});
// expose addNew oders CollectionView to the app
appData.addNewOrders = new wjCore.CollectionView(orders, {
newItemCreator: function () {
return { // add empty customer and shipper objects to new orders
customer: {},
shipper: {}
}
},
});
appData.addNewOrders.moveCurrentToLast();
// refresh views when data source changes
let ordersRefreshing = false;
appData.orders.collectionChanged.addHandler(function () {
ordersRefreshing = true;
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
ordersRefreshing = false;
});
// addNew orders
let addNewOrdersRefreshing = false;
appData.addNewOrders.collectionChanged.addHandler(function () {
addNewOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
addNewOrdersRefreshing = false;
});
// grouped orders
let groupedOrdersRefreshing = false;
appData.groupedOrders.collectionChanged.addHandler(function () {
groupedOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
groupedOrdersRefreshing = false;
});
// paged orders
let pagedOrdersRefreshing = false;
appData.pagedOrders.collectionChanged.addHandler(function () {
pagedOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
pagedOrdersRefreshing = false;
});
// sample layout definitions
appData.ldOneLine = [
{ cells: [{ binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true }] },
{ cells: [{ binding: 'date', header: 'Ordered' }] },
{ cells: [{ binding: 'shippedDate', header: 'Shipped' }] },
{ cells: [{ binding: 'amount', header: 'Amount', format: 'c', cssClass: 'amount' }] },
{ cells: [{ binding: 'customer.name', header: 'Customer' }] },
{ cells: [{ binding: 'customer.address', header: 'Address', wordWrap: true }] },
{ cells: [{ binding: 'customer.city', header: 'City', dataMap: cityMap }] },
{ cells: [{ binding: 'customer.state', header: 'State', width: 45 }] },
{ cells: [{ binding: 'customer.zip', header: 'Zip' }] },
{ cells: [{ binding: 'customer.email', header: 'Customer Email', cssClass: 'email' }] },
{ cells: [{ binding: 'customer.phone', header: 'Customer Phone' }] },
{ cells: [{ binding: 'shipper.name', header: 'Shipper' }] },
{ cells: [{ binding: 'shipper.email', header: 'Shipper Email', cssClass: 'email' }] },
{ cells: [{ binding: 'shipper.phone', header: 'Shipper Phone' }] },
{ cells: [{ binding: 'shipper.express', header: 'Express' }] }
];
appData.ldTwoLines = [
{
header: 'Order', colspan: 2, cells: [
{ binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true },
{ binding: 'date', header: 'Ordered' },
{ binding: 'amount', header: 'Amount', format: 'c', cssClass: 'amount' },
{ binding: 'shippedDate', header: 'Shipped' }
]
},
{
header: 'Customer', colspan: 3, cells: [
{ binding: 'customer.name', header: 'Name' },
{ binding: 'customer.email', header: 'EMail', colspan: 2, cssClass: 'email' },
{ binding: 'customer.address', header: 'Address' },
{ binding: 'customer.city', header: 'City', dataMap: cityMap },
{ binding: 'customer.state', header: 'State', width: 45 }
]
},
{
header: 'Shipper', cells: [
{ binding: 'shipper.name', header: 'Shipper', colspan: 2 },
{ binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
{ binding: 'shipper.express', header: 'Express' }
]
}
];
appData.ldThreeLines = [
{
header: 'Order', colspan: 2, cells: [
{ binding: 'id', header: 'ID', colspan: 2, cssClass: 'id' },
{ binding: 'amount', header: 'Amount', format: 'c', colspan: 2, cssClass: 'amount' },
{ binding: 'date', header: 'Ordered' },
{ binding: 'shippedDate', header: 'Shipped' }
]
},
{
header: 'Customer', colspan: 3, cells: [
{ binding: 'customer.name', header: 'Name' },
{ binding: 'customer.email', header: 'EMail', colspan: 2, cssClass: 'email' },
{ binding: 'customer.address', header: 'Address', colspan: 2 },
{ binding: 'customer.phone', header: 'Phone' },
{ binding: 'customer.city', header: 'City', dataMap: cityMap },
{ binding: 'customer.state', header: 'State', width: 45 },
{ binding: 'customer.zip', header: 'Zip' },
]
},
{
header: 'Shipper', cells: [
{ binding: 'shipper.name', header: 'Shipper' },
{ binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
{ binding: 'shipper.express', header: 'Express' }
]
}
];
appData.layoutDefs = new wjCore.CollectionView([
{
name: 'Traditional',
description: 'Traditional grid view, with one row per record. The user must scroll horizontally to see the whole record.',
def: appData.ldOneLine
},
{
name: 'Compact',
description: 'This view uses two rows per record. The layout is divided into three groups: order, customer, and shipper',
def: appData.ldTwoLines
},
{
name: 'Detailed',
description: 'This view uses three rows per record. The layout is divided into three groups: order, customer, and shipper',
def: appData.ldThreeLines
}
]);
return appData;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './app.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as wjGrid from '@grapecity/wijmo.react.grid.multirow';
import * as wjInput from '@grapecity/wijmo.react.input';
import { getData } from './data';
class App extends React.Component {
constructor(props) {
super(props);
this.collapsedHeadersChanged = (sender) => {
this.state.cbCollapsedHeaders.selectedValue = sender.collapsedHeaders;
};
this.selectedIndexChanged = (sender) => {
this.state.chMultirow.collapsedHeaders = sender.selectedValue;
};
this.onShowHeaderCollapseButton = (target) => {
this.state.chMultirow.showHeaderCollapseButton = target.checked;
};
this.initializeMultirow = (chMultirow) => {
this.setState({ chMultirow: chMultirow });
this.setState({ collapsedHeaders: this.state.chMultirow.collapsedHeaders });
};
this.initializeCollapsedHeaders = (cbCollapsedHeaders) => {
this.setState({ cbCollapsedHeaders: cbCollapsedHeaders });
};
this.state = {
orders: getData().orders,
threeLines: getData().ldThreeLines,
cbCollapsedHeadersSource: [
{ name: "true", value: true },
{ name: "false", value: false },
{ name: "null", value: null }
],
collapsedHeaders: '',
cbCollapsedHeaders: {
selectedValue: true
},
chMultirow: {
showHeaderCollapseButton: true
}
};
}
;
render() {
return <div className="container-fluid">
<wjGrid.MultiRow itemsSource={this.state.orders} layoutDefinition={this.state.threeLines} initialized={this.initializeMultirow} collapsedHeaders={this.state.cbCollapsedHeaders.selectedValue} showHeaderCollapseButton={this.state.chMultirow.showHeaderCollapseButton} collapsedHeadersChanged={this.collapsedHeadersChanged}></wjGrid.MultiRow>
<div>
<label htmlFor="cbCollapsedHeaders">
Collapsed Headers
<wjInput.ComboBox itemsSource={this.state.cbCollapsedHeadersSource} displayMemberPath="name" selectedIndexChanged={this.selectedIndexChanged} selectedValuePath="value" initialized={this.initializeCollapsedHeaders}>
</wjInput.ComboBox>
</label>
<label htmlFor="cbshowHeaderCollapseButton">
Show Header Collapse Button
<input type="checkbox" defaultChecked={true} onChange={e => this.onShowHeaderCollapseButton(e.target)}/>
</label>
</div>
</div>;
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AutoComplete</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.wj-multirow {
height: 400px;
width: 600px;
margin: 6px 0;
}
.wj-combobox {
width: 120px;
}
import * as wjCore from '@grapecity/wijmo';
import * as wjGrid from '@grapecity/wijmo.grid';
export function getData() {
// create some data
let appData = {}, customers = [], firstNames = 'Aaron,Paul,John,Mark,Sue,Tom,Bill,Joe,Tony,Brad,Frank,Chris,Pat'.split(','), lastNames = 'Smith,Johnson,Richards,Bannon,Wong,Peters,White,Brown,Adams,Jennings'.split(','), cities = 'York,Paris,Rome,Cairo,Florence,Sidney,Hamburg,Vancouver'.split(','), states = 'SP,RS,RN,SC,CS,RT,BC'.split(',');
for (let i = 0; i < 50; i++) {
let first = firstNames[randBetween(0, firstNames.length - 1)], last = lastNames[randBetween(0, lastNames.length - 1)];
customers.push({
id: i,
name: first + ' ' + last,
address: randBetween(100, 10000) + ' ' + lastNames[randBetween(0, lastNames.length - 1)] + ' St.',
city: cities[randBetween(0, cities.length - 1)],
state: states[randBetween(0, states.length - 1)],
zip: wjCore.format('{p1:d5}-{p2:d3}', {
p1: randBetween(10000, 99999),
p2: randBetween(100, 999)
}),
email: first + '.' + last + '@gmail.com',
phone: wjCore.format('{p1:d3}-{p2:d4}', {
p1: randBetween(100, 999),
p2: randBetween(1000, 9999)
})
});
}
let cityMap = new wjGrid.DataMap(cities);
let shippers = [
{ id: 0, name: 'Speedy Express', email: 'speedy@gmail.com', phone: '431-3234', express: true },
{ id: 1, name: 'Flash Delivery', email: 'flash@gmail.com', phone: '431-6563', express: true },
{ id: 2, name: 'Logitrax', email: 'logitrax@gmail.com', phone: '431-3981', express: false },
{ id: 3, name: 'Acme Inc', email: 'acme@gmail.com', phone: '431-3113', express: false }
];
let orders = [];
let today = new Date();
for (let i = 0; i < 20; i++) {
let shipped = wjCore.DateTime.addDays(today, -randBetween(1, 3000));
orders.push({
id: i,
date: wjCore.DateTime.addDays(shipped, -randBetween(1, 5)),
shippedDate: shipped,
amount: randBetween(10000, 500000) / 100,
customer: customers[randBetween(0, customers.length - 1)],
shipper: shippers[randBetween(0, shippers.length - 1)]
});
}
function randBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// expose orders CollectionView to the app
appData.orders = new wjCore.CollectionView(orders);
// expose grouped orders CollectionView to the app
appData.groupedOrders = new wjCore.CollectionView(orders, {
groupDescriptions: [
'customer.city'
]
});
// expose paged orders CollectionView to the app
appData.pagedOrders = new wjCore.CollectionView(orders, {
pageSize: 4
});
// expose addNew oders CollectionView to the app
appData.addNewOrders = new wjCore.CollectionView(orders, {
newItemCreator: function () {
return {
customer: {},
shipper: {}
};
},
});
appData.addNewOrders.moveCurrentToLast();
// refresh views when data source changes
let ordersRefreshing = false;
appData.orders.collectionChanged.addHandler(function () {
ordersRefreshing = true;
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
ordersRefreshing = false;
});
// addNew orders
let addNewOrdersRefreshing = false;
appData.addNewOrders.collectionChanged.addHandler(function () {
addNewOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
addNewOrdersRefreshing = false;
});
// grouped orders
let groupedOrdersRefreshing = false;
appData.groupedOrders.collectionChanged.addHandler(function () {
groupedOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!pagedOrdersRefreshing) {
appData.pagedOrders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
groupedOrdersRefreshing = false;
});
// paged orders
let pagedOrdersRefreshing = false;
appData.pagedOrders.collectionChanged.addHandler(function () {
pagedOrdersRefreshing = true;
if (!ordersRefreshing) {
appData.orders.refresh();
}
if (!addNewOrdersRefreshing) {
appData.addNewOrders.refresh();
}
if (!groupedOrdersRefreshing) {
appData.groupedOrders.refresh();
}
pagedOrdersRefreshing = false;
});
// sample layout definitions
appData.ldOneLine = [
{ cells: [{ binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true }] },
{ cells: [{ binding: 'date', header: 'Ordered' }] },
{ cells: [{ binding: 'shippedDate', header: 'Shipped' }] },
{ cells: [{ binding: 'amount', header: 'Amount', format: 'c', cssClass: 'amount' }] },
{ cells: [{ binding: 'customer.name', header: 'Customer' }] },
{ cells: [{ binding: 'customer.address', header: 'Address', wordWrap: true }] },
{ cells: [{ binding: 'customer.city', header: 'City', dataMap: cityMap }] },
{ cells: [{ binding: 'customer.state', header: 'State', width: 45 }] },
{ cells: [{ binding: 'customer.zip', header: 'Zip' }] },
{ cells: [{ binding: 'customer.email', header: 'Customer Email', cssClass: 'email' }] },
{ cells: [{ binding: 'customer.phone', header: 'Customer Phone' }] },
{ cells: [{ binding: 'shipper.name', header: 'Shipper' }] },
{ cells: [{ binding: 'shipper.email', header: 'Shipper Email', cssClass: 'email' }] },
{ cells: [{ binding: 'shipper.phone', header: 'Shipper Phone' }] },
{ cells: [{ binding: 'shipper.express', header: 'Express' }] }
];
appData.ldTwoLines = [
{
header: 'Order', colspan: 2, cells: [
{ binding: 'id', header: 'ID', cssClass: 'id', isReadOnly: true },
{ binding: 'date', header: 'Ordered' },
{ binding: 'amount', header: 'Amount', format: 'c', cssClass: 'amount' },
{ binding: 'shippedDate', header: 'Shipped' }
]
},
{
header: 'Customer', colspan: 3, cells: [
{ binding: 'customer.name', header: 'Name' },
{ binding: 'customer.email', header: 'EMail', colspan: 2, cssClass: 'email' },
{ binding: 'customer.address', header: 'Address' },
{ binding: 'customer.city', header: 'City', dataMap: cityMap },
{ binding: 'customer.state', header: 'State', width: 45 }
]
},
{
header: 'Shipper', cells: [
{ binding: 'shipper.name', header: 'Shipper', colspan: 2 },
{ binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
{ binding: 'shipper.express', header: 'Express' }
]
}
];
appData.ldThreeLines = [
{
header: 'Order', colspan: 2, cells: [
{ binding: 'id', header: 'ID', colspan: 2, cssClass: 'id' },
{ binding: 'amount', header: 'Amount', format: 'c', colspan: 2, cssClass: 'amount' },
{ binding: 'date', header: 'Ordered' },
{ binding: 'shippedDate', header: 'Shipped' }
]
},
{
header: 'Customer', colspan: 3, cells: [
{ binding: 'customer.name', header: 'Name' },
{ binding: 'customer.email', header: 'EMail', colspan: 2, cssClass: 'email' },
{ binding: 'customer.address', header: 'Address', colspan: 2 },
{ binding: 'customer.phone', header: 'Phone' },
{ binding: 'customer.city', header: 'City', dataMap: cityMap },
{ binding: 'customer.state', header: 'State', width: 45 },
{ binding: 'customer.zip', header: 'Zip' },
]
},
{
header: 'Shipper', cells: [
{ binding: 'shipper.name', header: 'Shipper' },
{ binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
{ binding: 'shipper.express', header: 'Express' }
]
}
];
appData.layoutDefs = new wjCore.CollectionView([
{
name: 'Traditional',
description: 'Traditional grid view, with one row per record. The user must scroll horizontally to see the whole record.',
def: appData.ldOneLine
},
{
name: 'Compact',
description: 'This view uses two rows per record. The layout is divided into three groups: order, customer, and shipper',
def: appData.ldTwoLines
},
{
name: 'Detailed',
description: 'This view uses three rows per record. The layout is divided into three groups: order, customer, and shipper',
def: appData.ldThreeLines
}
]);
return appData;
}
USA - International
Japan
South
Korea