To create a diagonal cell, follow this example:
You can use the divergeDirection method to get and set the diverge direction of the diagonal cell type. The diverge direction value type is a DivergeDirection enumeration.
topLeftToButtomRight: Represents diverge from the TopLeft to the ButtomRight.
bottomLeftToTopRight: Represents diverge from the BottomLeft to the TopRight.
The different divergeDirection settings create different diverge direction of the diagonal. The diagonal value depends on value of the cell in worksheet. You can use the setValue method to set the value of the cell. If the value of the cell is a string, a comma(,) must be used to split the items. In this case, the items can not contain commas. For example:
If you want to use items with commas, you can set a string array to the cell's value. If the item of the array is not a string, the item value will be converted into a string first. For example:
Use the lineBorder method to set a lineBorder for the diagonal cell. The lineBorder will change the diagonal style. For example:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet />
</gc-spread-sheets>
<div class="options-container">
<label>Select one of the Diagonal cells in Spread and edit its options with these text boxes.</label>
<div class="option-row">
<label for="divergeDirection">Diverge From: </label>
<select id="divergeDirection" v-model="divergeDirection">
<option value="0" selected="selected">topLeftToButtomRight</option>
<option value="1">bottomLeftToTopRight</option>
</select>
</div>
<div class="option-row">
<label for="valueText">Input text separated by ","; Example: Top,Bottom:</label>
<input id="valueText" type="text" v-model="valueText" />
</div>
<div class="option-row">
<label for="lineStyle">Line Style:</label>
<select id="lineStyle" v-model="lineStyle">
<option v-for="(key) in Array.from({ length: 13 }, (_, index) => index + 1)" :value="key" >{{ GC.Spread.Sheets.LineStyle[key] }}</option>
</select>
</div>
<div class="option-row">
<label for="lineColor">Line Color:</label>
<input type="color" id="lineColor" v-model="lineColor" />
</div>
<div class="option-row">
<label></label>
<input type="button" id="btnUpdate" value="Update" @click="updateDiagonalCell()" />
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-vue";
const spread = ref(null);
const divergeDirection = ref(0);
const valueText = ref('');
const lineColor = ref('black');
const lineStyle = ref(1);
const initSpread = (workbook) => {
spread.value = workbook;
workbook.suspendPaint();
workbook.setSheetCount(1);
var sheet1 = workbook.getSheet(0);
initSheet(sheet1);
workbook.resumePaint();
};
const initSheet = (sheet) => {
var diagonal11 = new GC.Spread.Sheets.CellTypes.Diagonal();
sheet.setCellType(1, 1, diagonal11);
sheet.setValue(1, 1, "Diverge From:,Diagonal Cells,Item Count");
sheet.setColumnWidth(1, 150);
sheet.setRowHeight(1, 80);
sheet.setColumnWidth(2, 150);
sheet.setColumnWidth(3, 150);
sheet.setValue(1, 2, "topLeftToBottomRight");
sheet.setValue(1, 3, "bottomLeftToTopRight");
sheet.setValue(2, 1, "Items Count = 2");
sheet.setRowHeight(2, 80);
sheet.setValue(3, 1, "Items Count = 3");
sheet.setRowHeight(3, 100);
sheet.setValue(4, 1, "Items Count > 3");
sheet.setRowHeight(4, 150);
var style = new GC.Spread.Sheets.Style();
style.vAlign = 1;
sheet.setStyle(1, -1, style);
sheet.setStyle(-1, 1, style);
var LT2BR2 = new GC.Spread.Sheets.CellTypes.Diagonal();
sheet.setCellType(2, 2, LT2BR2);
sheet.setValue(2, 2, "Top Title, Bottom Title");
var LT2BR3 = new GC.Spread.Sheets.CellTypes.Diagonal();
sheet.setCellType(3, 2, LT2BR3);
sheet.setValue(3, 2, "Top Title,Middle Title,Bottom Title");
var LT2BR4 = new GC.Spread.Sheets.CellTypes.Diagonal();
sheet.setCellType(4, 2, LT2BR4);
sheet.setValue(4, 2, "Top Title,Middle Title1,Middle Title2,Middle Title3,Bottom Title");
var BL2TR4 = new GC.Spread.Sheets.CellTypes.Diagonal();
BL2TR4.divergeDirection(GC.Spread.Sheets.CellTypes.DivergeDirection.bottomLeftToTopRight);
sheet.setCellType(4, 3, BL2TR4);
sheet.setValue(4, 3, "Top Title,Middle Title1,Middle Title2,Middle Title3,Bottom Title");
var BL2TR3 = new GC.Spread.Sheets.CellTypes.Diagonal();
BL2TR3.divergeDirection(GC.Spread.Sheets.CellTypes.DivergeDirection.bottomLeftToTopRight);
sheet.setCellType(3, 3, BL2TR3);
sheet.setValue(3, 3, "Top Title,Middle Title,Bottom Title");
var BL2TR2 = new GC.Spread.Sheets.CellTypes.Diagonal();
BL2TR2.divergeDirection(GC.Spread.Sheets.CellTypes.DivergeDirection.bottomLeftToTopRight);
sheet.setCellType(2, 3, BL2TR2);
sheet.setValue(2, 3, "Top Title,Bottom Title");
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, () => {
var sels = sheet.getSelections();
if (sels && sels.length > 0) {
var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
var diagonalCellType = sheet.getCellType(sel.row, sel.col);
if (!(diagonalCellType instanceof GC.Spread.Sheets.CellTypes.Diagonal)) {
diagonalCellType = new GC.Spread.Sheets.CellTypes.Diagonal();
}
var lineBorder = diagonalCellType.lineBorder();
var cellValue = sheet.getValue(sel.row, sel.col);
divergeDirection.value = diagonalCellType.divergeDirection() ? diagonalCellType.divergeDirection() : 0;
valueText.value = cellValue ? cellValue : '';
lineColor.value = lineBorder && lineBorder.color ? lineBorder.color : "black";
lineStyle.value = lineBorder && lineBorder.style ? lineBorder.style : 1;
sheet.repaint();
}
});
};
const updateDiagonalCell = () => {
var sheet = spread.value.getActiveSheet();
var sels = sheet.getSelections();
if (sels && sels.length > 0) {
var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
var diagonal = new GC.Spread.Sheets.CellTypes.Diagonal();
diagonal.divergeDirection(Number(divergeDirection.value));
diagonal.lineBorder(new GC.Spread.Sheets.LineBorder(lineColor.value, Number(lineStyle.value)));
sheet.setCellType(sel.row, sel.col, diagonal);
sheet.setValue(sel.row, sel.col, valueText.value);
}
}
const getActualRange = (range, maxRowCount, maxColCount) => {
var row = range.row < 0 ? 0 : range.row;
var col = range.col < 0 ? 0 : range.col;
var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
var colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new GC.Spread.Sheets.Range(row, col, rowCount, colCount);
}
</script>
<style scoped>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row{
padding-bottom: 12px;
}
label {
padding-bottom: 4px;
display: block;
}
input,
select {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
input[type=color]{
padding: 0;
box-sizing: border-box;
width: 100%;
}
#app {
height: 100%;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.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-print': 'npm:@mescius/spread-sheets-print/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
