Javascript Spreadsheet Events

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>

    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>

    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>