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 selection| Method | 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) : voidReset all exiting borders when selectionName is not defined. |
| refreshBorders | Refresh one or more selections.refreshBorders(selectionName?: string) : voidRefresh 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>