Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Specifies an object that contains all style settings for the TreeView.

Property Value

An Object which contains all style settings in TreeView directive.

controlStyle = {

general: 'iui-treeview',

item: {

general: {

disabled: 'iui-treeview-item-disabled',

focused: 'iui-treeview-item-focused',

normal: 'iui-treeview-item',

hovered: 'iui-treeview-item-hovered',

selected: 'iui-treeview-item-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-treeview-expand-box',

animated: 'iui-treeview-expand-box-load',

expanded: 'iui-treeview-expand-box-open',

collapsed: 'iui-treeview-expand-box-close'


content: {

disabled: 'iui-treeview-item-content-disabled',

focused: 'iui-treeview-item-content-focused',

normal: 'iui-treeview-item-content',

hovered: 'iui-treeview-item-content-hovered',

selected: 'iui-treeview-item-content-selected'



Property Value

An object that holds all style settings for the TreeView directive.


This property is accessed through 'control-style' attribute of TreeView directive.

You can use this property to change the appearance of the TreeView 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 TreeView.

Version Information

Supported in: v2.0.

Articles & Samples

See Also