close
Examples
Selection
This section is dedicated to all properties, events and methods for handling selection on the JavaScript grid.Documentation
Methods
Methods available to deal with the JavaScript grid selectionMethod | Description |
---|---|
Main selection | |
getHighlighted | Get the coordinates of the highlighted cells.getHighlighted() : Array | null |
getRange | Get the range description of the highlighted cells.getRange() : String | null |
selectAll | Select all cells.selectAll() : void |
updateSelection | Select the cells from the coordinates of a DOM element.updateSelection(e1: DOMElement, e2: DOMElement) : void |
updateSelectionFromCoords | Select the cells by coordinates.updateSelectionFromCoords(x1: Number, y1: Number, x2: Number, y2: Number) : void |
resetSelection | Remove the selection.resetSelection() : void |
isSelected | Verify if the coordinates given are included in the current selection.isSelected(x: Number, y: Number) : Boolean |
Secondary selections | |
setBorder | Create or update an existing selection with a defined color.setBorder(x1: Number, y1: Number, x2: Number, y2: Number, selectionName: string, colorHex: string) : void |
getBorder | Get the selection border object.getBorder(selectionName: string) : void |
resetBorders | Reset the selection by its name.resetBorders(selectionName?: string, resetPosition: boolean) : void Reset all exiting borders when selectionName is not defined. |
refreshBorders | Refresh one or more selections.refreshBorders(selectionName?: string) : void Refresh all existing borders when selectionName is not defined. |
Events
Event | Description |
---|---|
onblur | onblur(worksheet: Object) : void |
onfocus | onfocus(worksheet: Object) : void |
onselection | onselection(worksheet: Object, x1: Number, y1: Number, x2: Number, y2: Number, e: MouseEvent) : void |
Initial Settings
Property | Description |
---|---|
selectionCopy: boolean | Disable the clone selection. |
Examples
Programmatic spreadsheet selection
Select all worksheet cells in the grid programmatically.Source code
<html> <script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <button onclick="table[0].selectAll()">Select all</button> <button onclick="table[0].updateSelectionFromCoords(2,2,3,3)">updateSelectionFromCoords(2,2,3,3)</button> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('NjE0Yjc3NTVmNzAxNTliMGNlNWRiNzk0ZTliMGZjYTk1Yjk3MTBiYjYxN2E4YmY5ZWQ1ZmU3ZjNiOGI5MGYxMmM2YjY3ODhiNGJjNjUxYjBjMjZhMWNkOTllNTEyZGNmOTQwZjQzMDZiM2RmMTYzNmJmOGY0ZmVmN2NkNWE4ZjcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTJNREk0TmpNek9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Create the spreadsheet var table = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [6,6], }], }); </script> </html>
Secondary borders
Create secondary borders on the spreasdheet.Source code
<html> <script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <button onclick="table[0].setBorder(1,1,2,2,'red-visit','#ff0000')">Create new red selection</button> <button onclick="table[0].setBorder(3,3,4,4,'blue-visit','#0000ff')">Create new blue selection</button> <button onclick="table[0].resetBorders()">Clear all selection</button> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('NjE0Yjc3NTVmNzAxNTliMGNlNWRiNzk0ZTliMGZjYTk1Yjk3MTBiYjYxN2E4YmY5ZWQ1ZmU3ZjNiOGI5MGYxMmM2YjY3ODhiNGJjNjUxYjBjMjZhMWNkOTllNTEyZGNmOTQwZjQzMDZiM2RmMTYzNmJmOGY0ZmVmN2NkNWE4ZjcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTJNREk0TmpNek9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Create the spreadsheet var table = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [6,6], }], }); </script> </html>