SpreadJS supports the split resize feature while working with spreadsheets.
The Split Resize feature allows users to resize the current row or column along with the next visible column or row without affecting the the remaining rows and columns in the worksheet. This prevents the adjacent rows and columns from being moved out of the visible area or viewport in the worksheet.
For example - If you're working in split resize mode, resizing column A will also resize column B, but the size of all other columns (like Column C, D, E, F, G, H, I and so on) remains unmodified and hence your viewport area will not be affected.
Normal Resize Mode vs Split Resize Mode In the normal resize mode, resizing a row or column pushes all the adjacent rows and columns to the right, thus moving them out of the viewport. On the contrary, the split resize mode ensures that the position of the other rows and columns doesn't get affected when the resize operation is executed on the spreadsheet.
Split Resizing is helpful especially when users are analysing complex applications like financial, banking, stock and trading applications. Moreover, working in the split resize mode is beneficial because it doesn't affect the pagination while exporting or printing the spreadsheet. On the other hand, the normal resize mode can push the rows to the next page and trim the tail columns as well.
For instance- Let's say you're carrying out stock application analysis in a worksheet and you need to compare the stock investment performance of multiple stocks sold to clients in the current fiscal year.
Split Resize Mode - In the split resize mode, even after resizing the first column (Stock Investment Name) in the above spreadsheet, you will still be able to track the information in the last column- gain/loss percentage in the same viewport without having to scroll left and right again and again.
Normal Mode - If you resize column A (Stock Investment Name) in normal mode, it is likely that the last column will go outside the viewport and you lose focus over the crucial information (i.e. - the gain/loss percentage) as depicted in the above image.
While resizing rows and columns, users can choose between two different modes - "normal" and "split". The default setting is normal. However, if you've pressed the Ctrl key while resizing the rows or columns, it will always use the Split Resize feature by default.
The split resize feature can be enabled by using the "split" option in the ResizeMode enumeration. When the ResizeMode is set to split, then:
The following operations can be executed in the split resize mode:
This example code can be used to resize the rows and columns in the split resize mode.
JavaScript |
Copy Code
|
---|---|
<script> $(document).ready(function () { // Initializing Spread var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); // Get the activesheet var activeSheet = spread.getSheet(0); // Set columnResizeMode & rowResizeMode to 'Split' spread.options.columnResizeMode = GC.Spread.Sheets.ResizeMode.split; spread.options.rowResizeMode = GC.Spread.Sheets.ResizeMode.split; activeSheet.suspendPaint(); var colHeader = GC.Spread.Sheets.SheetArea.colHeader; activeSheet.setRowCount(12); activeSheet.setColumnCount(5); for (var i = 0; i < activeSheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport); i++) activeSheet.setColumnWidth(i, 120); activeSheet.setValue(0, 0, 'Stock Investment Name', colHeader); activeSheet.setValue(0, 1, 'Current Quote($)', colHeader); activeSheet.setValue(0, 2, 'Market Value($)', colHeader); activeSheet.setValue(0, 3, 'Total Cost($)', colHeader); activeSheet.setValue(0, 4, 'Gain/Loss(%)', colHeader); activeSheet.setArray(0, 0, [ ["Citycon-Oyj Corporation", 232.460, 492.00, 500.00, '-1.6%'], ["M-Secure Corporation", 560.270, 312.00, 300.00, '4.0%'], ["Nortan Corporation", 433.220, 711.00, 688.50, '3.3%'], ["Teski Corporation", 232.310, 693.00, 465.90, '48.7%'], ]); spread.resumePaint(); }); </script> |