LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


controlStyle

Specifies an object that holds a style which determines the appearance of all parts of the Grid.

Property Value

An Object which contains all style settings in Grid component.

controlStyle = {

general: {

disabled: 'iui-grid-disabled',

focused: 'iui-grid-focused',

normal: 'iui-grid',

hovered: 'iui-grid-hovered',

selected: 'iui-grid-selected'

},

column: {

header: {

cell: 'iui-grid-column-header-cell',

disabled: 'iui-grid-column-header-disabled',

normal: 'iui-grid-column-header',

hovered: 'iui-grid-column-header-hovered',

selected: 'iui-grid-column-header-selected'

},

footer: {

cell: 'iui-grid-column-footer-cell',

disabled: 'iui-grid-column-footer-disabled',

normal: 'iui-grid-column-footer',

hovered: 'iui-grid-column-footer-hovered',

selected: 'iui-grid-column-footer-selected'

},

sorting: {

normal: {

ascending: 'iui-sort-ascending',

descending: 'iui-sort-descending'

},

selected: {

ascending: 'iui-sort-ascending-selected',

descending: 'iui-sort-descending-selected'

}

}

},

row: {

general: {

disabled: 'iui-grid-row-disabled',

focused: 'iui-grid-row-focused',

normal: 'iui-grid-row',

hovered: 'iui-grid-row-hovered',

selected: 'iui-grid-row-selected'

},

expandBox: {

general: 'iui-grid-expand-box',

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

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

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

},

cell: {

disabled: 'iui-grid-row-cell-disabled',

focused: 'iui-grid-row-cell-focused',

normal: 'iui-grid-row-cell',

hovered: 'iui-grid-row-cell-hovered',

selected: 'iui-grid-row-cell-selected'

}

},

gridLines: {

none: 'iui-grid-lines-none',

horizontal: 'iui-grid-lines-horizontal',

vertical: 'iui-grid-lines-vertical',

both: 'iui-grid-lines-both',

}

}

Remarks

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

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

Version Information

Supported in: v1.0.

See Also