Dynamic Size

Theme:

SpreadJS provides methods to set the row height and column width to a dynamic size which will auto resize and fill the viewport.

This type of sizing can be used in conjunction with numbers to define a weighted proportion. For example, a column with a star size of "3" would fill 3 times that of a standard "" sized column in the viewport.

Use the setRowHeight and setColumnWidth methods to set the dynamic size.

    // The following setting will devide the viewport width with "50%", "30%", "10%", "10%".
    sheet.setColumnCount(4, GC.Spread.Sheets.SheetArea.viewport);
    sheet.setColumnWidth(0, "5*");
    sheet.setColumnWidth(1, "3*");
    sheet.setColumnWidth(2, "*");
    sheet.setColumnWidth(3, "*");

Use the getRowHeight and getColumnWidth methods can get the actual size and the setting value.

    sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.viewport);  //Get the actual size of column 0. (Get a number)
    sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.viewport, true); //Get the dynamic size of column 0. (Get a string or undefined)

Feedback

Submit and view feedback for

This Product This Page

Dynamic sizing, or proportional sizing, is used to make sure that columns and rows completely fill the viewport. When the viewport size is changed or the user adds/deletes/resizes any column or row, the columns/rows that have star sizing applied to them will automatically resize to fill the viewport. This type of sizing can be used in conjunction with numbers to define a weighted proportion. For example, a column with a star size of "3" would fill 3 times that of a standard "" sized column in the viewport. Use the setRowHeight and setColumnWidth methods to set the dynamic size. Use the getRowHeight and getColumnWidth methods can get the actual size and the setting value.

window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
spread.suspendPaint();
initSpread(spread);
spread.resumePaint();
};
function initSpread(spread) {
var sd = dataSource;
var sheet = spread.getActiveSheet();
if (sd.length > 0) {
sheet.setDataSource(sd);
}
sheet.setColumnWidth(0, "2*");
sheet.setColumnWidth(1, 70);
sheet.setColumnWidth(2, "*");
sheet.setColumnWidth(3, 110);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(6, 110);
}

<!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/data/data.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>The column "Film" and "Lead Studio" has been set to dynamic size. <br />Change the browser size or resize the column or hide the column to see how the dynamic size works.</p>
</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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}