Data Grid Selection
This section is dedicated to all properties, events and methods for handling selection on the JavaScript data grid.
Documentation
Methods
Methods available to deal with the JavaScript grid selection
| Method | Description |
|---|---|
| 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 |
Data Grid 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
Select all worksheet cells in the data grid programmatically.
<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="spreadsheet"></div>
<br/>
<button id="selectallbtn">Select all</button>
<button id="updateselectionbtn">updateSelectionFromCoords(2,2,3,3)</button>
<script>
// Set the JSS spreadsheet license
jspreadsheet.setLicense('ZTgwMTQ2ZTZkNGM5MDFiZDlhZjBiMmQ3OTQyOTFmZmNkOTRhNmM3YzM0ODVmZjkzN2MxNWYzOTg1NjlmOGMzMjI4NWM3YzU4OGI1M2Q2MTM2NGU5NzU1NTdmYjU4NjA5MWFlOWEzNWEyZjIzOWFkOGNiNGNiNDk2NDFlMDk1OGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFMU16SXlNekEwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// 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>