GridContainer

The GridContainer widget enables users to navigate the information or interactive elements it contains using directional navigation keys, such as Home key, end and arrow keys.


  • UI Type:

Extends: BaseWidget

Properties

Name Desciption
Cell HeightThe height of the cells of the grid container.
Cell WidthThe width of the cells of the grid container.
DisabledThe widget cannot be used.
HiddenHides the widget from the user.
MaximizeSet this widget to be maximized (take up all available space).
Show title bar
Tab IndexThe Tab Index is an integer that tells the order of the widget when using the tab-key to move from one widget to another.
TitleIf you like the panel can have a visible title at the top where the panels name is shown.

Style

Name Desciption
Background imageSelect a background image for the element. You can upload or choose from image library.
Background-colorChange background color of the widget.
BorderIt is used to hide/show borders.
Border colorAdd the color for the border.
Border radiusAdd curves to the borders of the widget.
Border styleThe style of the border whether it is solid, dotted or dashed.
Border widthDefine the border width in pixels for the widget.
ColorColor of the text inside the widgets. May not apply to all text inside all widgets.
Enable title bar border
Font SizeSet the font size in pixels for text.
MarginIt is used to edit the margin of the widget.
PaddingGenerate space around an element's content, inside of any defined borders.
Text-alignmentSet left, centered or right. Applies both to icon and text.
Title bar background color
Title bar border color
Title bar border radius
Title bar border style
Title bar border width
Title bar font size
Title bar padding left right
Title bar padding top bottom
Title bar text color

Events

Name Description Event Attribute
Blur Event when a widget goes out of focus.
Click Event that triggers based on touch or click.
event The event that triggered the handler.
DblClick Event that triggers based on double click.
event The event that triggered the handler.
Focus Event when indicating/ highlighting widget using the cursor.

Function

destroyDynamicWidgets ( )

collapse ( )

Collapse the panel

expand ( )

Expand the panel

isCollapsed ( ) →{ Boolean }

Checks whether the panel is collapsed

Returns

True if the panel is collapsed

setTitle ( title: String )

Set the title of the panel

Parameters
Name Type Description
title String New title

toggle ( )

Toggle the panel

blur ( )

Triggers the blur event.

focus ( )

Triggers the focus event.

get ( name: String ) →{ Object }

Gets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
Returns

The property's value.

getId ( ) →{ ID }

Returns the ID of the widget.

Returns

The ID of the widget

getValue ( ) →{ Object }

Returns the widget's value.

Returns

The widget's value.

hide ( )

Hides the widget.

isEnabled ( ) →{ Boolean }

Returns true if the widget is enabled.

Returns

True if enabled, otherwise false.

isHidden ( ) →{ Boolean }

Returns true if the widget is hidden.

Returns

True if hidden, otherwise false.

set ( name: String , value: Object )

Sets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
value Object The new value.

setEnabled ( Enabled: Boolean )

Enables/disables the widget.

Parameters
Name Type Description
Enabled Boolean True to enable the widget, false to disable.

setStyle ( Object: Object )

Set the widget-style

Parameters
Name Type Description
Object Object properties

setValue ( value: Object )

Sets the widget's value.

Parameters
Name Type Description
value Object The new value.

show ( )

Shows the widget.

Other Widgets