SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage User Interface / Split Resize Columns and Rows
In This Topic
    Split Resize Columns and Rows
    In This Topic

    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.

    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. 

    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 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

    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 resize mode

    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:

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

    Using Code

    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>