Grid Style Sheet is an object including style settings for all areas in which can apply Style Set independently.
Embedded default style sheet will be applied when the grid is initialized, and you can call GridBase.loadStyles method in two ways as indicated in the code below to apply different style set to the grid at any time.
If manage one or more style sheets through external file or server data, you can use it as part of application UI theme.
"default" is the style being applied to GridBase.defaultStyles thus will become the parent style of all region styles. In addition, the items noted as "loadStyles only" in the code below, are the styles which can be set as loadStyles even through not being contained in the style sheet.
var sheet = {
"default": {},
grid: {},
panel: {},
groupPanel: {
item: {},
itemInner: {},
head: {},
headInner: {}
},
body: {
empty: {},
row: {},
fixedRow: {},
cell: {},
fixedCell: {},
created: {},
updated: {},
deleted: {},
checked: {},
fixedColumnBar: {},
fixedRowBar: {},
selection: {},
mobileSelection: {},
rowRange: {}, // loadStyles only
rowDynamic: [], // loadStyles only
cellDynamic: [] // loadStyles only
},
header: {
group: {},
head: {},
sub: {},
menuHandle: {},
filterHandle: {},
sortHandle: {},
sortOrder: {},
summary: {
group: {},
head: {}
},
},
footer: {
group: {},
head: {}
},
rowGroup: {
header: {},
expander: {},
footer: {},
indent: {},
head: {},
bar: {},
headerBar: {},
footerBar: {}
},
rowIndicator: {
state: {},
created: {},
updated: {},
deleted: {}
},
checkBar: {
head: {}
},
headerItem: {},
footerItem: {},
tooltip: {},
tree: {
footer: {},
expander: {},
indent: {}
}
};
grid.loadStyles(sheet);
var sheet = {
"default": {},
"grid": {},
"panel": {},
"groupPanel": {},
"groupPanel.item": {},
"groupPanel.itemInner": {},
"groupPanel.head": {},
"groupPanel.headInner": {},
"body": {},
"body.empty": {},
"body.row": {},
"body.fixedRow": {},
"body.cell": {},
"body.fixedCell": {},
"body.rowRange": {},
"body.created": {},
"body.updated": {},
"body.deleted": {},
"body.checked": {},
"body.fixedColumnBar": {},
"body.fixedRowBar": {},
"body.selection": {},
"body.mobileSelection": {},
"body.rowDynamic": {},
"body.cellDynamic": {},
"header": {},
"header.group": {},
"header.head": {},
"header.sub": {},
"header.menuHandle": {},
"header.filterHandle": {},
"header.sortHandle": {},
"header.sortOrder": {},
"header.summary": {},
"header.summary.group": {},
"header.summary.head": {},
"footer": {},
"footer.group": {},
"footer.head": {},
"rowGroup.header": {},
"rowGroup.expander": {},
"rowGroup.footer": {},
"rowGroup.indent": {},
"rowGroup.head": {},
"rowGroup.bar": {},
"rowGroup.headerBar": {},
"rowGroup.footerBar": {},
"rowIndicator": {},
"rowIndicator.state": {},
"rowIndicator.created": {},
"rowIndicator.updated": {},
"rowIndicator.deleted": {},
"checkBar": {},
"checkBar.head": {},
"headerItem": {},
"tooltip": {},
"footerItem": {},
"tree.footer": {},
"tree.expander": {},
"tree.indent": {}
}
grid.loadStyles(sheet);
| Area | Parent | Summary |
|---|---|---|
| default | Last parent of all style set. | |
| grid | default | Used when draw the grid itself such as grid border or tree view line, etc. |
| panel | default | (Not used currently.) |
| groupPanel | default | Basic style set of group panel. |
| groupPanel.item | groupPanel | Used when draw field item being displayed in group panel. |
| groupPanel.itemInner | groupPanel | Used when draw inner border of field item being displayed in group panel. |
| groupPanel.head | groupPanel | Used when draw head cells of group panel. |
| groupPanel.headInner | groupPanel | Used when draw inner border of head cells of group panel. |
| body | default | Specify background color of Body area in which are displayed data cells. |
| body.empty | default | Background or text style of empty grid with no columns or rows. |
| body.row | default | Background color and bottom border style of grid rows. |
| body.fixedRow | default | Background color and bottom border style of fixed rows. |
| body.cell | default | Basic style set used when draw data cells. |
| body.fixedCell | body.cell | Basic style set used when draw data cells being contained in fixed area. |
| body.created | default | Style set used when draw CREATED row. |
| body.updated | default | Style set used when draw UPDATED row. |
| body.deleted | default | Style set used when draw DELETED row. |
| body.checked | default | Style set used when draw Checked row. |
| body.fixedColumnBar | default | Style set used when draw column bar which delimits fixed area. |
| body.fixedRowBar | default | Style set used when draw row bar which delimits fixed area. |
| body.selection | default | Style set used when draw color and border of selected area. |
| body.mobileSelection | default | Style set used when draw color and border of selected area in mobile. |
| body.rowRange | You can specify style set in each grid row. Please refer to rowRangeStyles. | |
| body.rowDynamic | Dynamic style set of grid row level. Please refer to rowDynamicStyles. | |
| body.cellDynamic | Dynamic style set of data cell level. Please refer to cellDynamicStyles. | |
| header | default | Basic style set used when draw GridHeader cells. |
| header.group | default | Basic style set used when draw group cells of GridHeader. |
| header.head | header | Style set used when draw head cells of GridHeader. |
| header.sub | default | Basic style set used when draw sub item of GridHeader cell. |
| header.menuHandle | default | Style set used when draw menu handle being displayed in GridHeader head cell. |
| header.filterHandle | default | Used when draw filter handle of column header cell. |
| header.sortHandle | default | Used when draw sort handle of column header cell. |
| header.sortOrder | default | Used when draw sort order text of column header cell. |
| header.summary | default | Basic style set used when draw HeaderSummary cells. |
| header.summary.group | default | Basic style set used when draw HeaderSummary group cells. |
| header.summary.head | header.summary | Style set used when draw HeaderSummary head cells. |
| footer | default | Style set used when draw GridFooter cell. |
| footer.group | default | Style set used when draw GridFooter group cell. |
| footer.head | footer | Style set used when draw GridFooter head cell. |
| rowGroup.header | default | Basic style set used when draw group row. |
| rowGroup.expander | default | Basic style set used when draw expander of group row. |
| rowGroup.footer | default | Basic style set used when draw group footer row. |
| rowGroup.indent | default | Style set used when draw left margins of group row. |
| rowGroup.head | header | Style set used when draw head cell of each level of row group. |
| rowGroup.foot | footer | Style set used when draw footer cell of each level of row group. |
| rowGroup.bar | default | (Not used currently.) |
| rowGroup.headerBar | rowGroup.header | (Not used currently.) |
| rowGroup.footerBar | rowGroup.footer | (Not used currently.) |
| rowIndicator | default | Basic style set used when draw RowIndicator cells. |
| rowIndicator.state | default | Basic style set used when draw RowIndicator state cells. |
| rowIndicator.created | default | Style set used when draw state cells of RowIndicator DataRowState.CRAETED row. |
| rowIndicator.updated | default | Style set used when draw state cells of RowIndicator DataRowState.UPDATED row. |
| rowIndicator.deleted | default | Style set used when draw state cells of RowIndicator DataRowState.DELETED or DataRowState.CREATE_AND_DEL row. |
| checkBar | default | Basic style set used when draw CheckBar cells. |
| checkBar.head | header | Style set used when draw CheckBar head cell. |
| tooltip | default | Used when display tooltip box being displayed over cell. (ver 1.3.5) |
| headerItem | default | Basic style set used when draw grid header item. |
| footerItem | default | Basic style set used when draw grid footer item. |
| tree | default | Same as Grid style set. v 1.3.8 |
| tree.footer | default | Basic style set used when draw footer cells of tree row. |
| tree.expander | default | Style set used when draw expander of tree row. |
| tree.indent | default | Style set used when draw left margins of tree row. |