Docs
API

Themes

In FancyGrid there are several themes: blue, bootstrap, dark, default, gray, extra-gray, dark.

Theme sand is deprecated.

Example


theme: 'gray'
To override some styling it requires to change size values and css values.

Example


.fancy-theme-gray .fancy-grid-cell {
  color: gray;
}
...
theme: {
  name: 'gray',
  config: {
    cellHeight: 92,
    titleHeight: 65
  }
}

To do absolutely new theme it needs:

To define it over Fancy.defineTheme

Example


.fancy-theme-my .fancy-grid-cell {
  color: #888888;
}
...
Fancy.defineTheme('my', {
  config: {
    cellHeaderHeight: 30,
    cellHeight: 32,
    titleHeight: 42,
    barHeight: 37,
    bottomScrollHeight: 12
  }
});

List of config properties

barHeight

Number

Bar height.

bottomScrollHeight

Number

bottom scroll height.

cellHeaderHeight

Number

Cell header height.

cellHeight

Number

Cell height.

gridBorders

Array

Grid borders widths.

gridWithoutPanelBorders

Array

Grid borders widths when there is not panel wrapper.

minCellWidth

Number

Min cell width.

panelBodyBorders

Number

Panel borders widths.

titleHeight

Number

Title height.

Borders

The most complex issue about theme is borders widths.
There are 3 borders params that need to know for that.
gridBorders, gridWithoutPanelBorders, panelBodyBorders.

Example


gridBorders: [0,1,1,1],
gridWithoutPanelBorders: [1,1,1,1],
panelBodyBorders: [0,0,0,0]

Changing css

To do styling it needs to change css classnames.

By defining new theme, it enables using name of theme inside on FancyGrid and css.


var grid = new FancyGrid({
  theme: 'my',
  ...
});


.fancy-theme-my .classname {
  
}

List of all css classnames of grid.

Panel

fancy-panel

Main panel classname.

fancy-panel-shadow

Panel classname that set shadow.

fancy-panel-grid-inside

Classname that sets only if grid is inside of panel.

fancy-panel-header

Panel header classname.

fancy-panel-header-text

Panel header text classname.

fancy-panel-header-tools

Panel header tools classname.

fancy-panel-body

Panel body classname.

fancy-panel-body-inner

Panel body inner classname.

fancy-panel-tbar

Panel tbar classname.

fancy-panel-bbar

Panel bbar classname.

fancy-panel-buttons

Panel buttons classname.

Bars

fancy-button

Button classname.

fancy-button-first

Ffirst button classname.

fancy-button-image

Image classname for button.

fancy-button-text

Button text classname.

fancy-bar-button-disabled

Disabled classname for button.

fancy-paging-first

First paging button classname.

fancy-paging-prev

Prev paging button classname.

fancy-paging-next

Next paging button classname.

fancy-paging-last

Last paging button classname.

fancy-separator

Separator classname.

fancy-bar-text

Text bar classname.

LoadMask

fancy-loadmask

LoadMask classname.

fancy-loadmask-inner

Inner loadmask classname.

fancy-loadmask-image

LoadMask image classname.

fancy-loadmask-text

LoadMask text classname.

Grid

fancy-grid

Grid classname.

fancy-grid-left

Grid left side classname.

fancy-grid-center

Grid center side classname.

fancy-grid-right

Grid right side classname.

fancy-grid-body

Grid body classname.

Grid resizer

fancy-grid-resizer-left

Grid left resizer classname.

fancy-grid-resizer-right

Grid right resizer classname.

Grid scroll

fancy-scroll-right

Grid scroll right classname.

fancy-scroll-right-inner

Grid scroll right inner classname.

fancy-scroll-bottom

Grid scroll bottom classname.

fancy-scroll-bottom-inner

Grid scroll bottom inner classname.

Grid Header

fancy-grid-header

Grid header classname.

fancy-grid-header-cell

Grid header cell classname.

fancy-grid-header-cell-container

Grid header cell inner classname.

fancy-grid-header-cell-text

Grid header cell text classname.

Grid Cell

fancy-grid-cell

Grid cell classname.

fancy-grid-cell-inner

Grid cell inner classname.

fancy-grid-cell-wrapper

Grid cell inside wrapper classname.

Avaliable only if in config cellWrapper is true.

fancy-grid-column

Grid column classname.

Grid Cell Editor

fancy-field

Field classname.

fancy-field-text-input

Field text input classname.

fancy-combo

Combo field classname.

fancy-combo-text

Combo field text classname.

fancy-combo-input

Combo input classname.

fancy-combo-dropdown-button

Combo dropdown button.

fancy-combo-result-list

Combo result list classname.

fancy-combo-list-active

Combo active item classname.

fancy-field-checkbox

Checkbox classname.

fancy-checkbox-on

Checkbox with true value classname.

fancy-field-checkbox-input

Checkbox input classname.

fancy-field-picker-button

In input of date field, picker element classname.

fancy-picker-button-back

Date field has date picker(calender).
In bar of calender there is back button.
It's classname.

fancy-picker-button-next

Date field has date picker(calender).
In bar of calender there is next button.
It's classname.

fancy-picker-button-date-wrapper

Date field has date picker(calender).
In bar of calender there is button to run year/month piker.
It's classname of wrapper.

fancy-picker-button-date

Date field has date picker(calender).
In bar of calender there is button to run year/month piker.
It's classname.

fancy-picker-button-today-wrapper

Date field has date picker(calender).
In bottom bar of calender there is 'today' button.
It's wrapper classname.

fancy-picker-button-today

Date field has date picker(calender).
In bottom bar of calender there is 'today' button.
It's classname.

fancy-month-picker-action-buttons

Date field has date picker(calender) which has sub picker of year/month.
In bottom bar there are button of ok/cancel.
It is classname of these buttons wrapper.

Grid Grouping

fancy-grid-group-row

Grid body group row.

fancy-grid-group-row-collapsed

Grid body group collapsed row.

fancy-grid-group-row-inner

Grid body group row inner.

It is expand/collapse element.

Grid Grouped Header

fancy-grid-header-grouped

This classname added to header if header contains grouped cells.

fancy-grid-header-cell-group-level-1

All grid cells from first grouped header row has this classname.

fancy-grid-header-cell-group-level-2

All grid cells from second grouped header row has this classname.
`