Colorize Cells
Colorize Cells
This demo shows a mini paint-app. Clicking on any of the three color buttons in the toolbar with call the (experimental) _setCellColors method.
Use the class name .dgxl-app on your toolbar to prevent deselecting the current cell selection when a button is pressed.
Cell background colors are possible using a background canvas. As the grid is 100% virtual, there are no actual DOM nodes for each cell. Using a canvas solves this problem. Another benefit is that the grid will stay snappy.
Note that the colors cannot be copied. Only cell values can. Keep in mind that this is an experimental feature.
Code
<style>
#grid {
height: 400px;
}
#toolbar {
background: #cbe4ff;
margin-bottom: 12px;
padding: 8px;
display: flex;
justify-content: space-between;
}
</style>
<div id="toolbar" class="dgxl-app">
<div>
<button class="button" id="button-undo">Undo</button>
<button class="button" id="button-redo">Redo</button>
</div>
<div>
<button class="button" id="button-green">Green</button>
<button class="button" id="button-pink">Pink</button>
<button class="button" id="button-blue">Blue</button>
<button class="button" id="button-clear">Clear</button>
</div>
</div>
<div id="grid"></div>
<script src="https://code.datagridxl.com/datagridxl.js"></script>
<script>
var grid = new DataGridXL("grid", {
data: DataGridXL.createEmptyData(100,10),
allowCellEdit: false,
allowCopy: false,
allowCut: false,
allowPaste: false,
allowCellFill: false
});
document.getElementById("button-undo").onclick = function(){
grid.undo();
}
document.getElementById("button-redo").onclick = function(){
grid.redo();
}
document.getElementById("button-pink").onclick = function(){
grid._setCellColors(grid.getCellSelection(), "#ffe1f0");
}
document.getElementById("button-blue").onclick = function(){
grid._setCellColors(grid.getCellSelection(), "#e1f0ff");
}
document.getElementById("button-green").onclick = function(){
grid._setCellColors(grid.getCellSelection(), "#f0ffe1");
}
document.getElementById("button-clear").onclick = function(){
grid._clearCellColors(grid.getCellSelection());
}
</script>
