Data Grid 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) : 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.
<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<br/>
<button id="selectallbtn">Select all</button>
<button id="updateselectionbtn">updateSelectionFromCoords(2,2,3,3)</button>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ODQwMGYwYmNlOTdlOTEwZTNiNjg4YWViYTAyYzI1ODhjNThmYjc3YzBjYzA5MjhlNmMyZDI3NWRlMjU2MWRhMDM2YWE3MmFkNDI3Y2EyNTY3MDIwZGExZWQ1NDAyNjhjNmQyNDVmNTgwY2NlYTliYmM1NGU0ZmVkNTNmYzA5Y2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNMU1Ea3lNVEE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create the spreadsheet
let table = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [6,6],
}],
});
document.getElementById("selectallbtn").onclick = () => table[0].selectAll();
document.getElementById("updateselectionbtn").onclick = () => table[0].updateSelectionFromCoords(2,2,3,3);
</script>
</html>
Secondary borders
Create secondary borders on the spreasdheet.
<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<button id="createredbtn">Create new red selection</button>
<button id="createbluebtn">Create new blue selection</button>
<button id="resetbtn">Clear all selection</button>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ODQwMGYwYmNlOTdlOTEwZTNiNjg4YWViYTAyYzI1ODhjNThmYjc3YzBjYzA5MjhlNmMyZDI3NWRlMjU2MWRhMDM2YWE3MmFkNDI3Y2EyNTY3MDIwZGExZWQ1NDAyNjhjNmQyNDVmNTgwY2NlYTliYmM1NGU0ZmVkNTNmYzA5Y2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNMU1Ea3lNVEE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create the spreadsheet
let table = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [6,6],
}],
});
document.getElementById("createredbtn").onclick = () => table[0].setBorder(1,1,2,2,'red-visit','#ff0000')
document.getElementById("createbluebtn").onclick = () => table[0].setBorder(3,3,4,4,'blue-visit','#0000ff')
document.getElementById("resetbtn").onclick = () => table[0].resetBorders()
</script>
</html>