# Frequently Used Events

A tutorial on how to bind code to frequently used events in SpreadJS

## Content

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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#cellclick) event.

```JavaScript
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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#celldoubleclick) event.

```JavaScript
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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#leavecell) event.

```JavaScript
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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#editstarting) and [EditEnded](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#editended) events.

```JavaScript
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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#editchange) event.

```JavaScript
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 left column changes while scrolling.
This event records the scroll status based on the difference between **oldOffset** and **newOffset** when `scrollByPixel` is set to true, where offset refers to the distance from the top of the **topRow** or bottom of the **leftColumn** to the current scroll position.
The following code sample shows how to use the `TopRowChanged` and `LeftColumnChanged` events when `scrollByPixel` is set to true.

```
var wb1 = new GC.Spread.Sheets.Workbook(document.getElementById("ss1"));
var wb2 = new GC.Spread.Sheets.Workbook(document.getElementById("ss2"));
wb1.options.scrollByPixel = true;
wb2.options.scrollByPixel = true;
wb1.bind(GC.Spread.Sheets.Events.TopRowChanged, (e, info) => { 
    wb2.getActiveSheet().showRow(info.newTopRow); 
    wb2.getActiveSheet().scroll(info.newOffset - info.oldOffset, 0);
});
wb1.bind(GC.Spread.Sheets.Events.LeftColumnChanged, (e, info) => {
   wb2.getActiveSheet().showColumn(info.newLeftCol);
   wb2.getActiveSheet().scroll(0, info.newOffset - info.oldOffset);
}); 
```

## Change in Sheet Tab

You can use events when the sheet tab changes.
The following code sample shows how to cancel the tab change.

```JavaScript
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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#dragdropblock) event.

```JavaScript
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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#sheetchanging) event is fired before a sheet is changed whereas a [SheetChanged](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#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.

```JavaScript
// 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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#rangechanged) event.

```JavaScript
// 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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#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.

```JavaScript
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");
     }
});
```