Back to the Documentation

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('M2FhMmI1N2I1M2NkZWU5MzQ5OWVlN2M4ZTAwNDA0ODI4MTk1YzcyOTIwNzBkOWNhYTUwMTI4YjBjNjE5N2FlMTFhNWNkNWViMjU5YjJiOTYzZjY5MjhmOTc1ZGUxNDYwNzEwYWM3ZGE0NzIyYzkyZThhMGFhYTU0OTk1NDQ2NjUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFM01EVXhOemswTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// 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('M2FhMmI1N2I1M2NkZWU5MzQ5OWVlN2M4ZTAwNDA0ODI4MTk1YzcyOTIwNzBkOWNhYTUwMTI4YjBjNjE5N2FlMTFhNWNkNWViMjU5YjJiOTYzZjY5MjhmOTc1ZGUxNDYwNzEwYWM3ZGE0NzIyYzkyZThhMGFhYTU0OTk1NDQ2NjUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFM01EVXhOemswTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// 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>