As an additional FYI,
As an example of a script that allows using "raw" CSS (with curly brackets {}), a script like this can be used:
function changeCSS() {
var style = document.createElement('style');
style.type = 'text/css';
// Change this CSS to whatever CSS rule is needed
var styleString = `widget-toolbar { display: none !Important; }
.div {}
`
if (style.styleSheet) {
style.styleSheet.cssText = styleString;
} else {
style.appendChild(document.createTextNode(styleString));
}
document.getElementsByTagName('head')[0].appendChild(style);
}
prism.run([
changeCSS()
])
The styleString variable can be used to enter any "raw" CSS as long as needed, this CSS is added to the header of the page and is now standard CSS.Table widgets individual cell include class names for every cell including the index of a cell on both the column and row basis, this can be used to select only the top header for a specific styling rule for example.To make a rule specific to one widget, a widget OID can be added to a CSS selector string, using the format [widgetid='${widgetID}'] at the beginning of a selector, an example of this functionality is:
widget.on('render', function (ev, se) {
function changeHeaderColorCSS(backgroundColor, textColor) {
var widgetID = widget.oid
var style = document.createElement('style');
style.type = 'text/css';
// Change this CSS if needed
var styleString = `[widgetid='${widgetID}'] .table-grid__cell--row-0 { background-color: ${backgroundColor} !Important; color: ${textColor} !Important }`
if (style.styleSheet) {
style.styleSheet.cssText = styleString;
} else {
style.appendChild(document.createTextNode(styleString));
}
document.getElementsByTagName('head')[0].appendChild(style);
}
// Change color or other attribute here
changeHeaderColorCSS('blue', 'white')
})
Without this CSS rules are not widget ID specific, and apply to all widgets where the rest of the selector applies.
David Raynor (DRay)
