Back to the Documentation

Cells Settings

The cells 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 data grid cells programmatically.

Method Description
getCell Get the spreadsheet cell object from the cell name. The cell name is the spreadsheet standard such as A1, B3
getCell(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

Data Grid Events

JS events related to the JavaScript data 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.

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

<script>
// Set the JSS spreadsheet license
jspreadsheet.setLicense('ZDZkZTAxMDJlOWJiNmY1MTg0N2M4ZDgwNDgyN2Q3OTk3ZTQ2MTM0YTUzMjIzYjQ1ZWI3YWZlMGRjMmFlYWVjYTc2YWMwYzA3M2U5YjlkMWQxNzM3YTA5YTc0NDk1OGQ3ZWU4NDBkNmE0ZmE0M2Y1ZDMyYWM3OTJjYTBlNDIzMzcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME1qQXhNVFkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

Edit this page on GitHub