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) : 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.
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('MTE0OGVkYmY0MGFmNTU2ZDgwNjM5MTFjZWY0Nzg3MTE0MTJmMTZlZTZjZDRlNzM5NWY2MGNhZjY5NjE4NzI0ZDJjMDM4YzVhOGMxMzViNjUyZDIzMmEyY2ZmMTRkZjUwOTY1YzRjOGE4YmRkNTA3ZWQyMTZiYjRmNmYxNmZjZDksZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGs1T1RZME1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');
// 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('MTE0OGVkYmY0MGFmNTU2ZDgwNjM5MTFjZWY0Nzg3MTE0MTJmMTZlZTZjZDRlNzM5NWY2MGNhZjY5NjE4NzI0ZDJjMDM4YzVhOGMxMzViNjUyZDIzMmEyY2ZmMTRkZjUwOTY1YzRjOGE4YmRkNTA3ZWQyMTZiYjRmNmYxNmZjZDksZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGs1T1RZME1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');
// Create the spreadsheet
var table = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [6,6],
}],
});
</script>
</html>
Create applications with spreadsheet-like controls
