Introduction
Split resizing allows the user to change the width of two adjacent columns or rows as a splitter between the two. For example, resizing column A would also resize column B but keep the other columns the same size, preventing important data from being moved out of the visible area when resizing other rows/columns.
This feature is useful when creating precise report layouts and need to make small adjustments without impacting the overall layout.
You can set the ResizeMode to split to enable this feature for both rows and columns.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var rowResizeMode = _getElementById("rowResizeMode");
rowResizeMode.addEventListener("change", function () {
spread.options.rowResizeMode = parseInt(rowResizeMode.options[rowResizeMode.selectedIndex].value, 10);
});
var columnResizeMode = _getElementById("columnResizeMode");
_getElementById("columnResizeMode").addEventListener("change", function () {
spread.options.columnResizeMode = parseInt(columnResizeMode.options[columnResizeMode.selectedIndex].value, 10);
});
sheet.resumePaint();
}
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">
<div class="option-row">
<p>Change the Resize Mode to Split to enable this feature. </p>
<p>For example, set Column Resize Mode to split. Now change the width of column A. Column B will automatically resize while the remaining columns will stay the same size.</p>
<label for="columnResizeMode">Column Resize Mode</label>
<select id="columnResizeMode">
<option value="0">normal</option>
<option value="1">split</option>
</select>
</div>
<div class="option-row">
<label for="rowResizeMode">Row Resize Mode</label>
<select id="rowResizeMode">
<option value="0">normal</option>
<option value="1">split</option>
</select>
</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 {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=number] {
width: 40px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
