Displaying an Informational Message

Hypergrid supports a simple text overlay called the info div. Primarily used to support the noDataMessage property, the application developer may find additional uses for it.

The info div

Each grid consists of:

• A <canvas> element into which the grid is rendered
• An informational message <div> superimposed on top of it

This message element is the info div.

Implicit setData usage

Hypergrid automatically sets the info div to grid.properties.noDataMessage when setData is called with no data rows or to an empty string otherwise.

Explicit setInfo usage

Although the info div was designed primarily to display the no-data message, developers can also set it explicitly at any time with grid.setInfo(message) to superimpose a message on the grid. Note however that when the div is visible, the user cannot click the portion of the canvas covered by the div.

Mark-up vs. text

If the message string contains a less than sign (<), it will be interpreted as mark-up (HTML); otherwise it is taken verbatim.

Programmatically setting the width of the info div

setInfo normally sets the width of the info div to the width of the rendered grid every time it is called. You can, however, override this with a second parameter, for example:

grid.setInfo(message, 500);

This will set the width of the info div to 500 pixels. You can also specify a css unit:

grid.setInfo(message, '50%');

Styling the info div

The default style of the info div is:

.hypergrid-container > div:first-child > div.info {
    position: absolute;
    display: none; /* initially hidden */
    margin-top: 150px; /* to place below headers */
    color: #eee;
    text-shadow: 1px 1px #ccc;
    font-size: 36pt;
    font-weight: bold;
    text-align: center;
    top: 0; right: 0; bottom: 0; left: 0;
}

You can apply custom styling to the infogrid by overriding the above properties or specifying additional properties.

Caution: Do not override position or display.

Declarative styling

In a CSS stylesheet, define another rule using the same selector as above.

Programmatic styling

You can also style the info div programmatically.

Example

The info div is normally transparent. To darken the grid and kill the text shadow:

var style = grid.canvas.infoDiv.style;
style.backgroundColor = 'rgba(0, 0, 0, .5)';
style.textShadow = 'inherit'; // or 'none'

or

var newStyles = {
    backgroundColor: 'rgba(0, 0, 0, .5)',
    textShadow: 'inherit' // or 'none'
};
Object.assign(grid.canvas.infoDiv.style, newStyles);

Although the above looks a lot like a stylesheet rule, it isn't: It's JavaScript and, with the exception of 0, the values must be strings (in quotes).

Example

The info div is normally the same exact size as the canvas element. To restrict the info div to just the bottom right of the grid:

var newStyles = {
    margin-top: 0,
    left: `67%`,
    top: '80%'
};