Javascript Spreadsheet Events

15 May 202022 minutes to read

Action Begin

The actionBegin event is triggered before every action starts.

List of actions that triggered for actionBegin event.

S.NO	Actions
1	Cell Formatting.
2	Clipboard Actions.
3	Merge Cells
4	Wrap text.
5	Number formatting.
6	Conditional Formatting.
7	Cell Styles.
8	Clear Functionalities
9	Chart
10	Picture.
11	Sorting.
12	Comments.
13	Goto Actions.
14	Sheet Updation.
15	Hyperlinks.
16	Lock cells and Protect sheet.
17	Filtering.
18	Format as Table.
19	Find and Replace Actions.
20	Named Range Actions.
21	Data validation.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // action begin event triggers before paste action
            actionBegin: function(args){
              if (args.reqType === "paste") {
                 args.cancel = true;  // if we set args.cancel value as true, paste action is prevented
             }
          },
        });
</script>

Action Complete

The actionComplete event is triggered after every action completes.

List of actions that triggered for actionComplete event.

S.NO	Actions
1	Cell Formatting.
2	Clipboard Actions.
3	Merge Cells
4	Wrap text.
5	Number formatting.
6	Conditional Formatting.
7	Cell Styles.
8	Clear Functionalities
9	Chart
10	Picture.
11	Sorting.
12	Comments.
13	Goto Actions.
14	Sheet Updation.
15	Hyperlinks.
16	Lock cells and Protect sheet.
17	Filtering.
18	Format as Table.
19	Find and Replace Actions.
20	Named Range Actions.
21	Data validation.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // action complete event triggers after copy paste action
            actionComplete: function(args){
              if (args.reqType === "copy-paste") {
                 var sheetIndex = args.pasteSheetIndex  // if we want to know the pasted sheet index.
             }
          },
        });
</script>

Before Batch Save

The beforeBatchSave event is triggered before the batch save.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // beforeBatchSave event triggered  before the batch save.
            beforeBatchSave: function(args){
             var dataSettings = args.dataSettings // if we want to know the dataSettings of batch save event.
          },
        });
</script>

Before Cell Format

The beforeCellFormat event is triggered before the cells to be formatted.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // before cell format event triggers before apply background color to cell.
            beforeCellFormat: function(args){
                 args.format.style["background-color"] = "#000000"  // if we want to change the color before applied to the cell.
          },
        });
</script>

Before Open

The beforeOpen event is triggered before the contextmenu is open.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // before open event triggers before opening the spreadsheet context menu.
            beforeOpen: function(args){
                 args.cancel = true;  // if we want to close the menu before open
            },
        });
</script>

Cell Click

The cellClick event is triggered when click on sheet cell.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // while clicking the spreadsheet cell.
            cellClick: function(args){
                 var rowIndex = args.rowIndex;
                 var colIndex = args.columnIndex;
                 var value = args.value; // if we want to know the clicked cell rowIndex and columnIndex and value
            },
        });
</script>

Cell Formatting

The cellFormatting event is triggered while formatting the cell.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // while formatting the spreadsheet cell.
            cellFormatting: function(args){
                 var format = args.format.style; //to know the styles applied while cell formatting.
            },
        });
</script>

Cell Selected

The cellSelected event is triggered when the cell is selected.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when the cell is selected.
            cellSelected: function(args){
                 var range = args.selectedRange; //to know the range of the cells to be selected.
            },
        });
</script>

Context Menu Click

The contextMenuClick event is triggered when click the contextmenu items.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when  click the contextmenu items.
            contextMenuClick: function(args){
                 args.cancel = true; //to prevent the clicked item's action in spreadsheet context menu.
            },
        });
</script>

Drag

The drag event is triggered when the selected cells are being dragged.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when the selected cells are being dragged.
            drag: function(args){
                 range = args.dragAndDropRange; //to know the range.
            },
        });
</script>

Drag Start

The dragStart event is triggered when the selected cells are initiated to drag.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when the selected cells are initiated to drag.
            dragStart: function(args){
                 range = args.dragAndDropRange; //to know the range.
            },
        });
</script>

Drop

The drop event is triggered when the selected cells are dropped.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when the selected cells are dropped
            drop: function(args){
                 range = args.dragAndDropRange; //to know the range.
            },
        });
</script>

editRangeBegin

The editRangeBegin event is triggered when the range editing starts.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when the range editing starts.
            editRangeBegin: function(args){
                var range = args.range;
                var sheetIndex = args.sheetIndex//to know the range and sheet index to be edited.
            },
        });
</script>

Edit Range Complete

The editRangeComplete event is triggered when the range editing completes.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when the range editing completes.
            editRangeComplete: function(args){
                var range = args.range;
                var sheetIndex = args.sheetIndex//to know the range and sheet index to be edited.
            },
        });
</script>

Key Down

The keyDown event is triggered when the key is pressed down.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when the  key is pressed down.
            keyDown: function(args){
                args.cancel = true; //to prevent the spreadsheet in edit mode.
            },
        });
</script>

Key Up

The keyUp event is triggered when the key is released.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when the key is released.
            keyUp: function(args){
                var commentEdit = args.isCommentEdit //to know whether we edited the comment cell.
            },
        });
</script>

load

The load event is triggered before the sheet is loaded.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // before the sheet is loaded.
            load: function(args){
               this.sheetRename("Sep-Billing");//to rename the sheet before it is loaded.
            },
        });
</script>

Load Complete

The loadComplete event is triggered after the sheet is loaded.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // after the sheet is loaded
            loadComplete: function(args){
               this.setBorder({ "type": "left", "color": "#FF5668", "style": "solid" }, "A1"); //it sets the border to cell A1 after the sheet is loaded
            },
        });
</script>

Menu Click

The menuClick event is triggered when click the menu item.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when click the menu item.
            menuClick: function(args){
               args.cancel = true; //to prevent the clicked item's action in the menu.
            },
        });
</script>

Menu Click

The menuClick event is triggered when click the menu item.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when click the menu item.
            menuClick: function(args){
               args.cancel = true; //to prevent the clicked item's action in the menu.
            },
        });
</script>

On Import

The onImport event is triggered when a file is imported.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when a file is imported.
            onImport: function(args){
              var importedData = args.importData //to get the data to be imported
            },
        });
</script>

Open Failure

The openFailure event is triggered when import sheet is failed to open.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when import sheet is failed to open.
            openFailure: function(args){
              var status = args.statusText //to get the status
            },
        });
</script>

Resize Start

The resizeStart event is triggered when start resizing the chart, picture, row and column.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when start resizing column.
            resizeStart: function(args){
              var oldWidth = args.oldWidth;
              var colIndex = args.colIndex; //to get the resized column index and old width
            },
        });
</script>

Resize End

The resizeEnd event is triggered after end of resizing the chart, picture, row and column.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when completes the column resizing
            resizeEnd: function(args){
              var newWidth = args.newWidth;
              var oldWidth = args.oldWidth;
              var colIndex = args.colIndex; //to get the resized column index and old width and new width.
            },
        });
</script>

Ribbon Click

The ribbonClick event is triggered when click on the ribbon.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when completes the column resizing
            ribbonClick: function(args){
              var id = args.Id; // to get the Id of the clicked ribbon item.
            },
        });
</script>

Tab Click

The tabClick event is triggered when click the ribbon tab.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when click the ribbon tab.
            tabClick: function(args){
              var activeIndex = args.activeIndex;
              var prevActiveIndex = args.prevActiveIndex; // to get the current and previous active index.
            },
        });
</script>

tabSelect

The tabSelect event is triggered when select the ribbon tab.

HTML

<div id="Spreadsheet"></div>

<script>
$("#Spreadsheet").ejSpreadsheet({
            // when select the ribbon tab.
            tabClick: function(args){
              var activeIndex = args.activeIndex;
              var prevActiveIndex = args.prevActiveIndex; // to get the current and previous active index.
            },
        });
</script>