Split Resize Columns and Rows

SpreadJS supports the split resize feature while working with spreadsheets.

How Split Resizing Works

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.

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.

Usage Scenario

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 does not 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.

Consider a scenario where you are 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. The following two types of resize modes depict how the data is affected.

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.

Enable Split Resizing

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:

• Users can select only a single row or column (including entire row/column).

• If users select multiple rows and columns, split resizing feature will not work and the rows and columns will be resized in the normal mode only.

• If users resize the last row or column in one viewport (including the viewport divided by the freeze row or freeze columns feature), then also the split resizing feature will not work and the rows and columns will be resized in the normal mode only.

• If a row or column is invisible (when column width = 0 or the column is hidden), then the modified row or column is resized along with the next visible row or column.

The following operations can be executed in the split resize mode:

• Users can hide rows and columns in the worksheet.

• Users can resize the height and width of the rows and columns to zero.

• Users can resize the rows and columns even when the zoom feature is also enabled.

Using Code

This example code can be used to resize the rows and columns in the split resize mode.

$(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();
});