SpreadJS 14
Features / Rows and Columns / Work with Rows and Columns
In This Topic
    Work with Rows and Columns
    In This Topic

    SpreadJS allows you to perform various operations on rows and columns as explained below:

    Add Rows and Columns

    This example adds rows and columns.

    JavaScript
    Copy Code
    window.onload = function()
    {
     var spread =
     new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
     var sheet = spread.getActiveSheet();
     var sheet = spread.getActiveSheet();
    
     // Set number of rows to 3.
     sheet.setRowCount(3, GC.Spread.Sheets.SheetArea.viewport);
     sheet.setValue(0, 0, "Row 1", GC.Spread.Sheets.SheetArea.viewport);
     sheet.setValue(1, 0, "Row 2", GC.Spread.Sheets.SheetArea.viewport);
     sheet.setValue(2, 0, "Row 3", GC.Spread.Sheets.SheetArea.viewport);
     sheet.setColumnWidth(0, 90.0, GC.Spread.Sheets.SheetArea.viewport);
    
     $("#button1").click(function()
       {
         // Add one row to Row 2.  
         sheet.addRows(1, 1);
         sheet.setValue(1, 0, "Added row");
       });
    
     $("#button2").click(function()
       {
        // Add one row to Row 2.  
        sheet.addColumns(1, 1);
        sheet.setValue(0, 1, "Added column");
      });
    } 
    

    Delete Rows and Columns

    This example deletes rows and columns.

    JavaScript
    Copy Code
     $(document).ready(function ()
      {
        var spread =
        new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
        var sheet = spread.getActiveSheet();
       
        // Set number of rows to 3.
        sheet.setRowCount(3, GC.Spread.Sheets.SheetArea.viewport);
        sheet.setValue(0, 0, "The 1st row", GC.Spread.Sheets.SheetArea.viewport);
        sheet.setValue(1, 0, "The 2st row", GC.Spread.Sheets.SheetArea.viewport);
        sheet.setValue(2, 0, "The 3st row", GC.Spread.Sheets.SheetArea.viewport);
        sheet.setColumnWidth(0, 90.0, GC.Spread.Sheets.SheetArea.viewport);
        $("#button1").click(function()
         {
            // Delete Row 2.
            spread.getActiveSheet().deleteRows(1, 1);
         });
       
        $("#button2").click(function()
         {
           // Delete Column 2.
           spread.getActiveSheet().deleteColumns(1, 1);
         });
    });
    

    Set Number of Rows and Columns

    This example sets the number of rows and columns.

    JavaScript
    Copy Code
    $(document).ready(function ()
    {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
        {sheetCount:3});
        var sheet = spread.getActiveSheet();
       
        // Set the number of rows and columns to 3.
        sheet.setRowCount(3, GC.Spread.Sheets.SheetArea.viewport);
        sheet.setColumnCount(3, GC.Spread.Sheets.SheetArea.viewport);
    }); 
    

    Set Row Height and Column Width

    This example sets the row height and column width.

    Custom row height and column width

    JavaScript
    Copy Code
    $(document).ready(function ()
    {
        var spread =
        new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
        var sheet = spread.getActiveSheet();
       
        // Change the height of the second row.
        sheet.setRowHeight(1, 90.0,GC.Spread.Sheets.SheetArea.viewport);
       
        //Change the width of the second column.
        sheet.setColumnWidth(1, 120.0,GC.Spread.Sheets.SheetArea.viewport);
    }); 
    

    Select and Deselect Rows

    This example selects and deselects rows.

    JavaScript
    Copy Code
    window.onload = function()
    {
      var spread =
      new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
      var activeSheet = spread.getActiveSheet();
      activeSheet.setColumnCount(5);
         $("#button1").click(function()
         {
             // Select entire row 4.
            activeSheet.addSelection(3, -1, 1, -1);
         });
        
         $("#button2").click(function()
          {
             // Remove the selections in the sheet.
             activeSheet.clearSelection();
         });
    } 
    


    Set Top Row and Column

    Sheet with custom top row and column

    This example sets the specified row and column at the top of the widget.

    JavaScript
    Copy Code
    $("#button1").click(function ()
    {
        var activeSheet = spread.getActiveSheet();
        activeSheet.showRow(9, GC.Spread.Sheets.VerticalPosition.top);
    });
    
    $("#button2").click(function()
    {
        var activeSheet = spread.getActiveSheet();
        activeSheet.showColumn(9, GC.Spread.Sheets.HorizontalPosition.left);
    });
    


    Get Index of Displayed Cell

    This example gets the index of displayed cell.

    JavaScript
    Copy Code
    $("#button1").click(function ()
    {
        var spread =
        new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
        var sheet = spread.getActiveSheet();
       
        // Acquire top row (column) index
        var topRow = sheet.getViewportTopRow(1);
        var leftCol = sheet.getViewportLeftColumn(1);
        alert("Index of top row being displayed: " + topRow + "\n" +
            "Index of first column being displayed: " + leftCol);
    });