The DataList ​​widget displays data records in a structured custom list view. It provides a way to move items, typically a list, from one content section to another.


  • UI Type:

Extends: BaseWidget

Properties

Name Desciption
DisabledThe widget cannot be used.
Drag&Drop AcceptedDrag and Drop item type accepted by this DataList.
Drag&Drop TypesDrag&Drop Item type.
Enable Drag & DropEnables dragging & dropping the items in the DataList.
Enable Drag&Drop SourceEnables dragging of items from this DataList.
Footer as LastFooter as the last list item.
Footer StyleCSS style of the footer.
Footer TemplateHTML template to use as the list's footer.
Header StyleCSS style of the header.
Header TemplateHTML template to use as the list's header.
HiddenHides the widget from the user.
Item CountNumber of Items displayed in the DataList.
Item StyleCSS style of the items.
Item TemplateHTML template to use when displaying items.
MaximizeSet this widget to be maximized (take up all available space).
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.

Style

Name Desciption
Background-colorChange background color of the widget.
ColorColor of the text inside the widgets. May not apply to all text inside all widgets.
Font SizeSet the font size in pixels for text.
Text-alignmentSet left, centered or right. Applies both to icon and text.

Events

Name Description Event Attribute
Blur Event when a widget goes out of focus.
event The event that gets triggered when the user "leaves" an element.
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.
event Focus is the event that gets triggered when a user makes an element come into focus, by clicking on it.
ItemClick Triggered when an item in a list, table or a calendar is clicked.
event Object containing the item (event.item) that was clicked.

Function

getItems ( ) { Array }

Gets the items in the list.

Returns

Array holding all of the Lists items.

refresh ( opts: Object )

Refreshes the list.

Parameters
Name Type Description
opts Object Optional object used to configure the refresh.

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.