Spread provides several types of line styles to help you customize the sheet's border line and grid lines, such as thin, dotted, double, and so on. For example, the following lines change the left and right border lines of the indicated range to the dotted line style.
Spread provides two kinds of diagonal border line. The diagonal border line includes diagonal down and diagonal up.
diagonalDown
diagonalUp
For example,The following set the diagonal border line for cells
You can add or remove gridlines or set the color with the following code:
You can set the option SheetAreaOffset to move the whole sheet rendering area have some offset from the host left/top point.There will be enough space to show all things (just like left/top border and left/top selection) perfectly.
The sheetAreaOffset default value is {left:0,top:0}.
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import './styles.css';
const spreadNS = GC.Spread.Sheets, SheetArea = spreadNS.SheetArea;
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
isGridLinePanel:boolean;
left: number;
top: number;
showGridLine: boolean;
headerVisible: boolean;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
constructor() {
this.isGridLinePanel = true;
}
initSpread($event: any) {
let self = this;
let spread = this.spread = $event.spread;
spread.addSheet(1);
this.initSheetBorderAndGridLine();
this.initSheetAreaSheet();
let gridlineSheet = spread.getSheet(0);
self.showGridLine = gridlineSheet.options.gridline.showHorizontalGridline && gridlineSheet.options.gridline.showVerticalGridline;
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function(e: any, args: any) {
let isGridLinePanel;
if (args.newSheet === gridlineSheet) {
isGridLinePanel = true;
} else {
isGridLinePanel = false;
}
self.isGridLinePanel = isGridLinePanel;
});
}
initSheetBorderAndGridLine() {
let spread = this.spread;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
let lineBorder1 = new spreadNS.LineBorder('blue', spreadNS.LineStyle.thin);
let range = sheet.getRange(7, 1, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderLeft(new spreadNS.LineBorder('red', spreadNS.LineStyle.double));
range = sheet.getRange(7, 4, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderTop(new spreadNS.LineBorder('green', spreadNS.LineStyle.medium));
range = sheet.getRange(7, 7, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderRight(new spreadNS.LineBorder('black', spreadNS.LineStyle.dashed));
range = sheet.getRange(7, 10, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderBottom(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
range = sheet.getRange(11, 1, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thick), { all: true });
range.diagonalUp(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thin));
range = sheet.getRange(11, 4, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.hair), { all: true });
range.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
range = sheet.getRange(11, 7, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.mediumDashed), { all: true });
range.diagonalUp(new spreadNS.LineBorder('plum', spreadNS.LineStyle.double));
range.diagonalDown(new spreadNS.LineBorder('brown', spreadNS.LineStyle.thick));
range = sheet.getRange(11, 10, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.dashDot), { all: true });
range = sheet.getRange(17, 1, 2, 5);
range.setBorder(lineBorder1, { outline: true });
range = sheet.getRange(17, 1, 2, 2);
range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.slantedDashDot), { inside: true });
range = sheet.getRange(17, 4, 2, 2);
range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.mediumDashed), { inside: true });
range = sheet.getRange(16, 7, 7, 4);
range.setBorder(new spreadNS.LineBorder('plum', spreadNS.LineStyle.thick), {
left: true,
bottom: true
});
range = sheet.getRange(15, 8, 7, 4);
range.setBorder(new spreadNS.LineBorder('royalblue', spreadNS.LineStyle.slantedDashDot), {
top: true,
right: true
});
range = sheet.getRange(16, 8, 6, 3);
range.setBorder(new spreadNS.LineBorder('tomato', spreadNS.LineStyle.dashDot), {
left: true,
bottom: true
});
range = sheet.getRange(16, 8, 6, 3);
range.setBorder(new spreadNS.LineBorder('palegreen', spreadNS.LineStyle.mediumDashed), {
top: true,
right: true
});
range = sheet.getRange(16, 9, 5, 2);
range.setBorder(new spreadNS.LineBorder('violet', spreadNS.LineStyle.dotted), {
left: true,
bottom: true
});
range = sheet.getRange(17, 8, 5, 2);
range.setBorder(new spreadNS.LineBorder('skyblue', spreadNS.LineStyle.hair), {
top: true,
right: true
});
sheet.addSpan(17, 9, 2, 1);
range = sheet.getRange(17, 9, 2, 1);
range.setBorder(new spreadNS.LineBorder('purple', spreadNS.LineStyle.thin), { all: true });
sheet.setArray(1, 3, [
[ 'Gender', 'Phone Number', 'Address' ],
[ 'woman', '021-432668', 'Chester Road' ],
[ 'man', '021-432238', 'Gertt Road' ],
[ 'man', '021-432533', 'Jnyliner Road' ],
[ 'man', '021-432125', 'Approach Road' ]
]);
let style = new GC.Spread.Sheets.Style();
style.wordWrap = true;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.setStyle(1, 2, style, 3);
sheet.setText(1, 2, ' Info Name', spreadNS.SheetArea.viewport);
let cell = sheet.getCell(1, 2);
cell.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
sheet.setStyle(1, 3, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1, 4, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1, 5, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setText(2, 2, 'John', spreadNS.SheetArea.viewport);
sheet.setText(3, 2, 'linda', spreadNS.SheetArea.viewport);
sheet.setText(4, 2, 'henry', spreadNS.SheetArea.viewport);
sheet.setText(5, 2, 'smith', spreadNS.SheetArea.viewport);
sheet.setRowHeight(1, 30);
sheet.setColumnWidth(4, 120);
sheet.setColumnWidth(5, 120);
range = sheet.getRange(1, 2, 5, 4);
range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.thin), { all: true });
sheet.resumePaint();
}
initSheetAreaSheet() {
let sheet = this.spread.getSheet(1);
sheet.suspendPaint();
sheet.name('SheetAreaOffset');
let data = sheetAreaJSON;
sheet.fromJSON(data);
sheet.options.colHeaderVisible = false;
sheet.options.rowHeaderVisible = false;
sheet.options.sheetAreaOffset = {
left: 2,
top: 2
};
let range = sheet.getRange(0, 0, 3, 10);
range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.double), {
left: true,
bottom: true,
top: true,
right: true
});
sheet.resumePaint();
this.headerVisible = sheet.options.colHeaderVisible && sheet.options.rowHeaderVisible;
this.left = sheet.options.sheetAreaOffset.left;
this.top = sheet.options.sheetAreaOffset.top;
}
setGridline ($event: any) {
let sheet = this.spread.getActiveSheet();
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = $event.target.checked;
sheet.options.gridline.showVerticalGridline = $event.target.checked;
sheet.resumePaint();
}
setHeaderVisible ($event: any) {
let sheet = this.spread.getActiveSheet();
sheet.options.rowHeaderVisible = $event.target.checked;
sheet.options.colHeaderVisible = $event.target.checked;
}
setOffset (position: any) {
let sheet = this.spread.getActiveSheet();
let left = position.left,
top = position.top;
sheet.options.sheetAreaOffset = {
left: parseInt(left, 10),
top: parseInt(top, 10)
}
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule, FormsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/data/sheetAreaData.js" type="text/javascript"></script>
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/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.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
</gc-spread-sheets>
<div class="options-container" *ngIf="isGridLinePanel">
<div class="options-row">
<input type="checkbox" id="showGridLineCheckBox" [checked]="showGridLine" (change)="setGridline($event)"/>
<label for="showGridLineCheckBox">ShowGridLine</label>
</div>
</div>
<div class="options-container" *ngIf="!isGridLinePanel">
<div class="options-row">
<input type="checkbox" id="headerVisible" [checked]="headerVisible" (change)="setHeaderVisible($event)"/>
<label htmlFor="headerVisible">HeaderVisible</label>
</div>
<div class="options-row">
<label htmlFor="left">left:</label>
<input type="number" id="left" [(ngModel)]="left" [value]="left|number"/>
</div>
<div class="options-row">
<label htmlFor="top">top:</label>
<input type="number" id="top" [(ngModel)]="top" [value]="top|number"/>
</div>
<div class="options-row">
<input type="button" value="Set Sheet Area Offset" (click)="setOffset({left:left, top:top})"/>
</div>
</div>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
display: inline-block;
}
input[type="text"] {
width: 200px;
}
label {
width: 40px;
display: inline-block;
margin-bottom: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
