Frequently Used Events

The following sections provide code samples for various events available in SpreadJS.

Click a Cell

You can configure events for when a cell is clicked in a SpreadJS worksheet.

The following code sample shows how to use the CellClick event.

var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});

var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.CellClick, 

    function (sender, args) 
    {
        if(args.sheetArea === GC.Spread.Sheets.SheetArea.colHeader)
        {
            console.log("The column header was clicked.");
        }
        if(args.sheetArea === GC.Spread.Sheets.SheetArea.rowHeader)
        {
            console.log("The row header was clicked.");
        }
        if(args.sheetArea === GC.Spread.Sheets.SheetArea.corner){
            console.log("The corner header was clicked.");
        }
        console.log("Clicked column index: " + args.col);
        console.log("Clicked row index: " + args.row);
});

Double Click a Cell

You can configure events for when a cell is double-clicked in a SpreadJS worksheet.

The following code sample shows how to use the CellDoubleClick event.

var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});

var activeSheet = spread.getActiveSheet();

activeSheet.bind(GC.Spread.Sheets.Events.CellDoubleClick, function (sender, args) 
{
    
    if(args.sheetArea === GC.Spread.Sheets.SheetArea.colHeader)
    {
        console.log("The column header was double clicked.");
    }
    if(args.sheetArea === GC.Spread.Sheets.SheetArea.rowHeader)
    {
        console.log("The row header was double clicked.");
    }
    if(args.sheetArea === GC.Spread.Sheets.SheetArea.corner)
    {
        console.log("The corner header was double clicked.");
    }
    console.log("Double clicked column index: " + args.col);
    console.log("Double clicked row index: " + args.row);
});

Move a Cell

You can use events when moving a cell.

The following code sample shows how to use the LeaveCell event.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var activeSheet = spread.getActiveSheet();

activeSheet.bind(GC.Spread.Sheets.Events.LeaveCell, function (sender, args) 
{
    console.log("The column index before moving: " + args.col);
    console.log("The row index before moving: " + args.row);    
});

Start or Stop Edit Mode

You can use events when edit mode starts or stops.

The following code sample shows how to use the EditStarting and EditEnded events.

var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});

var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.EditStarting, function (sender, args) 
{  
    console.log("Start cell editing.");
});

activeSheet.bind(GC.Spread.Sheets.Events.EditEnded, function (sender, args) 
 {
    console.log("Finish cell editing.");
 });

Change in Data

You can use events when the data in a cell changes.

The following code sample shows how to use the EditChange event.

var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});
var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.EditChange, function (sender, args) 
{
    console.log("Cell (" + args.row + ", " + args.col + ") data has been changed.")
});

Change in Top Row or Left Column

You can use events when the top row or column changes when scrolling.

The following code sample shows how to use the TopRowChanged and LeftColumnChanged events.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
spread.addSheet();
var sheet1 = spread.getSheet(0),
    sheet2 = spread.getSheet(1);
sheet1.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) 
{
  /* Set the displayed top row of sheet1 to sheet2 
   (vertical scroll  synchronization). */

  sheet2.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
});

sheet1.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function (sender, args) 
{
 /* Set the displayed left column of sheet1 to sheet2 
  (Horizontal scroll synchronization). */
sheet2.showColumn(args.newLeftCol, GC.Spread.Sheets.HorizontalPosition.left);
});

Change in Sheet Tab

You can use events when the sheet tab changes.

The following code sample shows how to cancel the tab change.

var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});
spread.addSheet();
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanging, 
function (sender, args) 
{
    // Cancel sheet switching.
    args.cancel = true;
});

spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function (sender, args) 
{
    console.log("Active sheet has been switched.");
});

Drag and Drop Block of Cells

You can use events when dragging and dropping a block of cells.

The following code sample shows how to use the DragDropBlock event.

var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});

var sheet = spread.getActiveSheet();
sheet.bind(GC.Spread.Sheets.Events.DragDropBlock, function (e, args) 
{
  console.log("From Column:" + args.fromCol);
  console.log("From Row:" + args.fromRow);
  console.log("To Column:" + args.toCol);
  console.log("To Row:" + args.toRow);
});

Change in Sheets

You can configure an event before a sheet is changed or after a sheet is changed.

The SheetChanging event is fired before a sheet is changed whereas a SheetChanged event is fired after a sheet is changed. The sheet changes here include inserting, deleting, hiding, or unhiding a sheet by using the context menu or clicking the "+" button in the sheet tab.

The following code sample shows how to use the SheetChanged and SheetChanging events.

// initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// Bind SheetChanged event
spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (sender, args) {
    console.log("Changed type: " + args.propertyName + " & Sheet Index : " + args.sheetIndex);
});

// Bind SheetChanging event
spread.bind(GC.Spread.Sheets.Events.SheetChanging, function (sender, args) {
    console.log("Changing type: " + args.propertyName + " & Sheet Index : " + args.sheetIndex);
});

Change in Cell Range

You can use code when the cell range of a table range changes.

The following code sample shows how to use the RangeChanged event.

// Initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// Get the activesheet
var activeSheet = spread.getSheet(0);
// Add data
for (var col = 1; col < 6; col++) {
    for (var row = 2; row < 11; row++) {
        activeSheet.setValue(row, col, row + col);
    }
}
for (var col = 7; col < 12; col++) {
    for (var row = 2; row < 5; row++) {
        activeSheet.setValue(row, col, row + col);
    }
}
// Add tables
activeSheet.tables.add("Table1", 1, 1, 10, 5, GC.Spread.Sheets.Tables.TableThemes.dark1);
activeSheet.tables.add("Table2", 1, 7, 4, 5, GC.Spread.Sheets.Tables.TableThemes.dark1);

// Bind RangeChanged event
activeSheet.bind(GC.Spread.Sheets.Events.RangeChanged, function (sender, args) {
    if (args.tableNames) {
        console.log("RangeChanged event fired for Table : " + args.tableNames);
    }
});

Click a Button

You can use the ButtonClicked event with a button, check box, or hyperlink cells.

The ButtonClicked event occurs when the user clicks a button, check box, or hyperlink in a cell.

The following code sample shows how to display a message when you click on the button cell.

var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("this is a button");
activeSheet.setCellType(1,1,cellType);

spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function (e, args)
{
   var sheet = args.sheet, row = args.row, col = args.col;
   var cellType = activeSheet.getCellType(row, col);
   if (cellType instanceof GC.Spread.Sheets.CellTypes.Button)
     {
        alert("Button Clicked");
     }
});