Advanced User Interface Controls and Components
Specifies an object that holds a style which determines the appearance of all parts of the TreeGrid.
An Object which contains all style settings in TreeGrid directive.
controlStyle = {
general: 'iui-treegrid',
column: {
general: {
content: 'iui-treegrid-column-cell-content',
disabled: 'iui-treegrid-column-disabled',
normal: 'iui-treegrid-column',
hovered: 'iui-treegrid-column-hovered',
selected: 'iui-treegrid-column-selected'
},
header: {
content: 'iui-treegrid-column-header-cell-content',
disabled: 'iui-treegrid-column-header-disabled',
normal: 'iui-treegrid-column-header',
hovered: 'iui-treegrid-column-header-hovered',
selected: 'iui-treegrid-column-header-selected'
},
body: {
content: 'iui-treegrid-column-body-cell-content',
disabled: 'iui-treegrid-column-body-disabled',
normal: 'iui-treegrid-column-body',
hovered: 'iui-treegrid-column-body-hovered',
selected: 'iui-treegrid-column-body-selected'
},
footer: {
content: 'iui-treegrid-column-footer-cell-content',
disabled: 'iui-treegrid-column-footer-disabled',
normal: 'iui-treegrid-column-footer',
hovered: 'iui-treegrid-column-footer-hovered',
selected: 'iui-treegrid-column-footer-selected'
}
},
row: {
general: {
disabled: 'iui-treegrid-row-disabled',
focused: 'iui-treegrid-row-focused',
normal: 'iui-treegrid-row',
hovered: 'iui-treegrid-row-hovered',
selected: 'iui-treegrid-row-selected'
},
checkBox: {
general: 'iui-checkbox',
box: {
general: 'iui-checkbox-box',
disabled: 'iui-checkbox-box-disabled',
checked: 'iui-checkbox-checked',
indeterminate: 'iui-checkbox-indeterminate',
unchecked: 'iui-checkbox-unchecked'
}
},
expandBox: {
general: 'iui-treegrid-expand-box',
animated: 'iui-treegrid-expand-box-load',
expanded: 'iui-treegrid-expand-box-open',
collapsed: 'iui-treegrid-expand-box-close'
},
cell: {
content: 'iui-treegrid-row-cell-content',
general: 'iui-treegrid-row-cell',
disabled: 'iui-treegrid-row-cell-disabled',
focused: 'iui-treegrid-row-cell-focused',
normal: 'iui-treegrid-row-cell',
hovered: 'iui-treegrid-row-cell-hovered',
selected: 'iui-treegrid-row-cell-selected'
}
},
cell: {
content: 'iui-treegrid-row-cell-content',
general: 'iui-treegrid-row-cell',
disabled: 'iui-treegrid-row-cell-disabled',
focused: 'iui-treegrid-row-cell-focused',
normal: 'iui-treegrid-row-cell',
hovered: 'iui-treegrid-row-cell-hovered',
selected: 'iui-treegrid-row-cell-selected'
}
}
This property is accessed through 'control-style' attribute of TreeView directive
You can use this property to change the appearance of the TreeGrid dynamically from code. By simply setting custom CSS classes in your app code and apply the name of the class to some of above style fields, you can override the default appearance of the TreeGrid.
Supported in: v2.0.
An example of AngularJS TreeGrid with rows displayed in alternate colors.
A demonstration on how to change the appearance of individual cell in the TreeGrid.
A demonstration on how to change the appearance of columns.