Espresso Grid‎ > ‎

Grid Styling

Though the grid itself is wrapped in an iframe, HTML5 and modern browsers allow for parent and iframe window objects to post messages to one another. On initialization, Espresso Grid is listening for CSS files to be passed in as needed, or optionally to be declared on the fly using the grid event "ControlRawCSS". Here, we sample both methods, and also provide a few likely classes designers may want to style.

Declaring Stylesheets

When initializing a grid, the init object accepts a CSS attribute with href's to stylesheets a developer expects the grid to include:
var grid = espressoGrid.init({
    id: 'uniqueID',
    auth: authObject,
    css: { cssFileHandle: 'https://yourFileHref.css' }
});

Conditional Styling (From the Container)

Occasionally, when debugging  CSS or due to circumstances in the container, styles may need to be applied after initialization. In that case, Espresso Grid also listens for events broadcast from the container to the iframe:
grid.broadcast('ControlRawCSS', '.grid .gridFooter button{ background-color: red; }');

Common CSS Handles

We have provided a sample stylesheet in the Espresso Grid repository (viewable here). Below are just some of the most common classes we expect designers may have to style, though everything in the grid iframe is style-able.
 Class Description
 .grid .gridFooter Element wrapping grid controls within the iframe
 .grid .generic-type-number Specific element for columns with a numeric value according to the database
 .grid .generic-type-boolean Specific element for columns with a boolean value according to the database
 .grid .generic-type-text Specific element for columns with a text value according to the database
 .grid .generic-type-date Specific element for columns with a date value according to the database
 .grid .generic-type-binary Specific element for columns with a binary value according to the database
 .grid .ngHeaderSortColumn Element wrapping a grid header cell
 .grid-alert-box When the grid is actively engaged, typically when searching, saving, or fetching, the alert box appears to provide some user feedback
 .grid .ngRow Element wrapping a grid row
 .grid .ngCellText Element wrapping a grid cell
 .filters Element wrapping search filters


Comments