Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxTreeGrid.

• jqx-widget - applied to the TreeGrid widget.
• jqx-tree-grid-indent - applied to the TreeGrid indent elements. Adds horizontal spacing between the tree levels.
• jqx-tree-grid-title - applied to the Tree column cells.
• jqx-tree-grid-expand-button - applied to the expand button in the Tree column.
• jqx-tree-grid-collapse-button - applied to the collapse button in the Tree column.
• jqx-tree-grid-checkbox - applied to the TreeGrid checkboxes.
• jqx-tree-grid-checkbox-tick - applied to the Tick element in the TreeGrid checkboxes.
• jqx-tree-grid-icon - applied to the TreeGrid icon container elements.
• jqx-tree-grid-icon-rtl - applied to the TreeGrid icon container elements in RTL mode.
• jqx-tree-grid-icon-size - applied to the TreeGrid icon IMG elements.
• jqx-grid - applied to TreeGrid container element.
• jqx-grid-pager - applied to the TreeGrid Pager.
• jqx-grid-header- applied to TreeGrid Columns container element.
• jqx-grid-column-header - applied to a TreeGrid column.
• jqx-widget-header - applied to a TreeGrid column, Toolbar, Statusbar and Groups Header.
• jqx-widget-content - applied to the TreeGrid's content area.
• jqx-grid-content - applied to the TreeGrid's content area.
• jqx-grid-toolbar - applied to the toolbar.
• jqx-grid-statusbar - applied to the statusbar.
• jqx-cell - applied to the TreeGrid cells.
• jqx-grid-cell - applied to the TreeGrid cells.
• jqx-grid-cell-locked - applied to TreeGrid cells in a locked row.
• jqx-grid-cell-sort - applied to the TreeGrid cells in the sort column.
• jqx-grid-cell-filter - applied to the TreeGrid cells in the filter column.
• jqx-grid-cell-alt - alternating cells style. This is applied to the cells in the alternating rows.
• jqx-grid-cell-pinned - applied to the cells in a pinned column.
• jqx-grid-cell-selected - applied to a selected cell.
• jqx-fill-state-pressed - applied to a selected cell.
• jqx-grid-cell-hover - applied to a hovered cell.
• jqx-fill-state-hover - applied to a hovered cell.
• jqx-grid-column-resizeline - applied to the column's resize line.
• jqx-grid-column-resizestartline - applied to the column's resize start line.
• jqx-fill-state-disabled - applied to the widget when it is disabled.
• jqx-grid-group-drag-line - applied to the drop line indicators displayed in the grouping header.
• jqx-grid-group-column-line - applied to the lines between the group columns.
• jqx-right-align - applied to the content in cells depending on the column's cellsAlign value. Aligns the cell's content to the right.
• jqx-left-align - applied to the content in cells depending on the column's cellsAlign value. Aligns the cell's content to the left.
• jqx-center-align - applied to the content in cells depending on the column's cellsAlign value. Aligns the cell's content to the center.

When you create a custom style with colors and backgrounds for jqxTreeGrid, you need to do the following:

• Add the above CSS classes related to jqxTreeGrid
• After each CSS class, add your theme name.
  For example:
  jqx-grid-energyblue
• To apply your custom style to jqxTreeGrid, you need to set its 'theme' property(option) to point to your theme's name.
• The sample below demonstrates how to set the 'Energy Blue' theme to jqxTreeGrid. [フレーム]