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
MethodDescription

Main selection

getHighlightedGet the coordinates of the highlighted cells.
getHighlighted() : Array | null

getRangeGet the range description of the highlighted cells.
getRange() : String | null

selectAllSelect all cells.
selectAll() : void

updateSelectionSelect the cells from the coordinates of a DOM element.
updateSelection(e1: DOMElement, e2: DOMElement) : void

updateSelectionFromCoordsSelect the cells by coordinates.
updateSelectionFromCoords(x1: Number, y1: Number, x2: Number, y2: Number) : void

resetSelectionRemove the selection.
resetSelection() : void

isSelectedVerify if the coordinates given are included in the current selection.
isSelected(x: Number, y: Number) : Boolean

Secondary selections

setBorderCreate or update an existing selection with a defined color.
setBorder(x1: Number, y1: Number, x2: Number, y2: Number, selectionName: string, colorHex: string) : void
getBorderGet the selection border object.
getBorder(selectionName: string) : void
resetBordersReset the selection by its name.
resetBorders(selectionName?: string, resetPosition: boolean) : void
Reset all exiting borders when selectionName is not defined.
refreshBordersRefresh one or more selections.
refreshBorders(selectionName?: string) : void
Refresh all existing borders when selectionName is not defined.


Events

EventDescription
onbluronblur(worksheet: Object) : void
onfocusonfocus(worksheet: Object) : void
onselectiononselection(worksheet: Object, x1: Number, y1: Number, x2: Number, y2: Number, e: MouseEvent) : void


Initial Settings

PropertyDescription
selectionCopy: booleanDisable 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/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 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('ZDAzNzY1YTBmYTBlYThkODdmNmQ1OGQ5ZTg2YjRmN2ZhODc5YmQ1NGJiMjA4YjIzODNjYTY5MDNmN2VlN2U3OGE0MjcwMjQ3YmY2NmVlMWVjMTk4Y2M1NDRiMjQ4YWJhYTM4MmJmYmY3ODk5NjliODlhOGYxYjUzZTczZDYyODQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTmpFd09Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5');

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

// Create the spreadsheet
var table = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6,6],
    }],
});
</script>
</html>