グリッドスタイルシートは独立的にスタイルセットを適用できる すべてのグリッド領域についてのスタイル設定が含まれた客体である。
グリッドの初期化の時に内装された基本スタイルシートが適用されて、 下のサンプルのコードに提示した二つの方式で GridBase.loadStyles メソッドを呼び出していつでも違うスタイルシートを適用することができる。
一つ以上のスタイルシートを外部ファイルやサーバーデータで管理すると、 状況に合うアプリケーションUIテーマの一部として使うことができる。
var sheet = {
grid: {},
panel: {},
groupPanel: {
head: {}
},
body: {
empty: {},
row: {},
fixedRow: {},
cell: {},
fixedCell: {},
fixedColumnBar: {},
fixedRowBar: {},
selection: {},
mobileSelection: {},
rowRange: {},
rowDynamic: [],
defaultDynamic: [],
},
header: {
head: {},
group: {},
sub: {},
summary: {
head: {},
group: {}
},
},
footer: {
group: {},
head: {}
},
rowGroup: {
head: {},
foot: {},
header: {},
expander: {},
footer: {},
indent: {},
bar: {},
headerBar: {},
footerBar: {}
},
rowIndicator: {
state: {}
},
checkBar: {
head: {}
},
tree: {
expander: {}
}
};
grid.loadStyles(sheet);
var sheet = {
"grid": {},
"panel": {},
"groupPanel": {},
"groupPanel.head": {},
"body": {},
"body.empty": {},
"body.row": {},
"body.fixedRow": {},
"body.cell": {},
"body.fixedCell": {},
"body.fixedColumnBar": {},
"body.fixedRowBar": {},
"body.selection": {},
"body.mobileSelection": {},
"header": {},
"header.head": {},
"header.group": {},
"header.sub": {},
"header.summary": {},
"header.summary.head": {},
"header.summary.group": {},
"footer": {},
"footer.group": {},
"footer.head": {},
"rowGroup.head": {},
"rowGroup.foot": {},
"rowGroup.header": {},
"rowGroup.expander": {},
"rowGroup.footer": {},
"rowGroup.indent": {},
"rowGroup.bar": {},
"rowGroup.headerBar": {},
"rowGroup.footerBar": {},
"rowIndicator": {},
"rowIndicator.state": {},
"checkBar": {},
"checkBar.head": {},
"tree.expander": {}
}
grid.loadStyles(sheet);