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. |
<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. |
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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>