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:
var spreadNS = GC.Spread.Sheets;
var spread, formulaBox;
window.onload = async function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
spread.suspendPaint();
initSpread(spread);
initLineStyle();
spread.resumePaint();
};
const UI = {
get selDivergeFrom() { return _getElementById("selDivergeFrom"); },
get txtValue() { return _getElementById("txtValue"); },
get selLineStyle() { return _getElementById('selLineStyle'); },
get selLineColor() { return _getElementById('selLineColor'); },
get btnUpdate() { return _getElementById('btnUpdate'); },
}
function getUIData() {
var diagonal = new GC.Spread.Sheets.CellTypes.Diagonal();
diagonal.divergeDirection(Number(UI.selDivergeFrom.value));
var lineBorder = new GC.Spread.Sheets.LineBorder(UI.selLineColor.value, Number(UI.selLineStyle.value));
diagonal.lineBorder(lineBorder);
return { value: UI.txtValue.value, diagonal };
}
function setUIData(uiData) {
var diagonal = uiData.diagonal;
var value = uiData.value;
UI.selDivergeFrom.value = diagonal.divergeDirection() ?? 0;
UI.txtValue.value = value;
UI.selLineStyle.value = diagonal?.lineBorder()?.style ?? 1;
UI.selLineColor.value = diagonal?.lineBorder()?.color ?? "black";
}
function initSpread(spread) {
spread.setSheetCount(1);
var sheet1 = spread.getSheet(0);
initSheet(sheet1);
}
function 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 spreadNS.Range(row, col, rowCount, colCount);
}
function 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, "topLeftToButtomRight");
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(spreadNS.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 spreadNS.CellTypes.Diagonal)) {
diagonalCellType = new GC.Spread.Sheets.CellTypes.Diagonal();
}
setUIData({ diagonal: diagonalCellType, value: sheet.getValue(sel.row, sel.col) });
}
});
UI.btnUpdate.addEventListener('click', () => {
var sels = sheet.getSelections();
if (sels && sels.length > 0) {
var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
var uiData = getUIData();
sheet.setCellType(sel.row, sel.col, uiData.diagonal);
sheet.setValue(sel.row, sel.col, uiData.value);
}
});
}
function initLineStyle() {
var lineStyles = GC.Spread.Sheets.LineStyle;
var selStyle = UI.selLineStyle;
for (let i = 1; i <= 13; i++) {
var option = document.createElement('option');
option.value = i;
option.text = lineStyles[i];
selStyle.add(option);
}
}
function _getElementById(id) {
return document.getElementById(id);
}
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<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>Diverge From: </label>
<select id="selDivergeFrom">
<option value="0" selected="selected">topLeftToButtomRight</option>
<option value="1">bottomLeftToTopRight</option>
</select>
</div>
<div class="option-row">
<label>Input text separated by ","; Example: Top,Bottom:</label>
<input id="txtValue" type="text" />
</div>
<div class="option-row">
<label>Line Style:</label>
<select id="selLineStyle">
</select>
</div>
<div class="option-row">
<label>Line Color:</label>
<input type="color" id="selLineColor" />
</div>
<div class="option-row">
<label></label>
<input type="button" id="btnUpdate" value="Update" />
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.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%;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
