Cells
Thecells property
helps overwrite the column settings for one individual cell. It defines the input data
type editor and many other properties, such as read-only, masks, render, and much more.Documentation
Methods
The following methods interact with the cells programmatically.Method | Description |
---|---|
getCell | Get the spreadsheet cell object from the cell name. The cell name is the spreadsheet standard such as A1, B3getCell(cellName: String) => Object |
getCellFromCoords | Get the spreadsheet cell object from its coordinates. The coordinates starts on zero-zero for the first cell A1.getCellFromCoords(x: Number, y: Number) => Object |
getSelected | Get the worksheet selected cells.getSelected(columnNameOnly: Boolean, ignoreHidden: Boolean) => Array @param columnNameOnly: To get only the cell names as string (true). Get the cell objects (false). @param ignoreHidden: Exclude hidden cells (true). Bring all cells (false) |
updateCell | This is a internal method and it does not perform persistence or history. You should avoid using this method, please use setValue instead.updateCell(x: Number, y: Number, value: String, force: Boolean) => Array |
getCells | Get the attribute settings from a cell by cell name.getCells(cellName: String) => Object |
setCells | Set the attribute settings for a cell by cell name.setCells(cellName: String, attributes: Object) => void |
isAttached | Verify if a cell element is attached to the DOM.isAttached(x: Number, y: Number) => void |
Events
JS events related to the JavaScript grid cells.Property | Description |
---|---|
oncreatecell | oncreatecell(worksheet: Object, cell: DOMElement, x: Number, y: Number, value: Value) => void JSS creates the cells progressively when the viewport is in use. |
Cells settings Pro
The following property is available through the initialization of the spreadsheet.Property | Description |
---|---|
cells: array | Array with the initial cell attributes. |
Examples
The following example shows how to initialize the spreadsheet with custom attributes at the cell level.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> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('M2VjNjMxYWVjYTIwZTFmMDNkZGI4ZGI0MDhiZmE1MTY5ZTBjMTgzMTUzNGUxY2EyNDIwMjgyN2Y5NzkwYzJjZmY2MDZkYzkzN2RiMzc4YWVlZmNlNWFhZDdjZTBiZDAzNTNjNjE1ZjBiNjg5Mzc3MzNhMWM1OTY3MTIwYWY0ZDgsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TURFd09Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: [ ['<img src="https://www.autoblog.com/img/research/styles/photos/performance.jpg" width="150" tabindex="0"><br><h3>Vehicle Payment Calculator</h3>', ''], ['Purchase price', '19700'], ['Down payment', '1000'], ['Trade-in value', '500'], ['Interest rate', '0.0305'], ['Length of loan (in months)', '60'], ['', ''], ['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'], ['Total cost', '=-(B8*B6)+(B3+B4)'], ], columns: [ { width:'300px' }, { width:'200px' }, ], mergeCells: { A1: [2, 1] }, rows: { 0: { height:'200px' } }, cells: { A1: { type:'html' }, B2: { type:'number', mask: '#.##0,00' }, B3: { type:'number', mask: '#.##0,00' }, B4: { type:'number', mask: '#.##0,00' }, B5: { type:'number', mask: '0.00%' }, B8: { type:'number', mask: '#.##0,00' }, B9: { type:'number', mask: '#.##0,00' }, }, }] }); </script> </html>