Styling dgrid

Styling dgrid

dgrid components are designed to be highly CSS-driven for optimal performance and organization, so visual styling should be controlled through CSS.

Styling Grid Columns

The Grid module creates classes based on the field names and column IDs of the columns defined, following the conventions field-<field-name> and dgrid-column-<column-id>. (If a className is specified in a column definition, it is used in place of field-<field-name>.)

For example, you could define a grid and CSS for it like so:

<style>
    .field-age {
        width: 80px;
    }
    .field-first {
        font-weight: bold;
    }
</style>
<script>
    require(["dgrid/Grid"], function(Grid){
        var grid = new Grid({
            columns: {
                age: "Age",
                first: "First Name",
                ...
            }}, ...);
        grid.renderArray(someData);
    });
</script>

Skinning dgrid Components

dgrid automatically loads the necessary structural CSS to work properly using xstyle's css module. However, to make the component far more visually attractive, it is common to also apply one of the the included skins. There are various CSS files under the css/skins directory which can be used to significantly alter the look and feel of dgrid components. The skin.html test page provides a quick demonstration of all included skins.

Many of the classes commonly involved in customizing layout and skin can be discovered by examining the CSS of existing skins, or by inspecting elements in your browser's developer tools.

To help get started, the following is a list of classes commonly employed in the structuring of dgrid components:

• dgrid: Applied to each dgrid list or grid at the top-level element
• dgrid-header: Applied to the element which contains the header area
• dgrid-scroller: Applied to the element responsible for scrolling the data content
• dgrid-content: Applied to the element inside of the scroller area, which holds all the data contents
• dgrid-row: Applied to each row element
• dgrid-row-even: Applied to each even row element
• dgrid-row-odd: Applied to each odd row element Applying a different color to alternating rows can help visually distinguish individual items.
• dgrid-selected: Applied to selected rows or cells
• dgrid-cell: Applied to each cell element
• dgrid-cell-padding: Applied to each cell element, or to an inner element within the cell in older versions of non-quirks mode IE to properly apply padding to keep the padding within the box measurements (box-sizing is preferred by the grid).
• dgrid-focus: Applied to the element (cell or row) with the focus (for keyboard based navigation)
• dgrid-expando-icon: Applied to the expando icon on tree nodes
• dgrid-header-scroll: Applied to the node in the top right corner of a Grid, above the vertical scrollbar

The following generic class names are also available for generic skinning (following the jQuery ThemeRoller convention):

• ui-widget-content: Applied to each dgrid list or grid at the top element
• ui-widget-header: Applied to the element that contains the header rendering
• ui-state-default: Applied to each row element
• ui-state-active: Applied to selected rows or cells
• ui-state-highlight: Applied to a row for a short time when the contents are change (or it is newly created)