A ColumnView displays and allows the user to browse and select items in a dynamic tree structure (e.g. a filesystem or multi-level navigation).

Notice: The examples created via pure markup will not respond to user interaction. For multi-level navigation, please checkout the JavaScript examples.

Basic ColumnView

English Français Document
Show Markup

                      

ColumnView with preview

English Français Document Name document.txt Title The Document File Size 5MB Modified 2 hours ago Type application/vnd.oasis.opendocument.text-web Publish Status References 2
Show Markup

            

The following examples demonstrate usage of the JavaScript API's for Coral.ColumnView.

JS Class Initialization

The following is an example of the ColumnView, which is manually initialized on page initialization, added to the DOM and navigates via the coral-columnview:loaditems event.

Notice: The individual columns and preview are loaded from html snippets.

                    

No example content provided!

Loading remote data

The following shows how to listen for the coral-columnview:loaditems event and use setNextColumn.

                    
                    
                    

Responding to user interaction

The following shows how to listen for events generated by the ColumnView above.

                        

Log

Coral.ColumnView API

Constructor

JavaScript:

new Coral.ColumnView() or document.createElement('coral-columnview')

HTML Tag:

<coral-columnview>

Extends

Sub-components

Static Properties

Coral.ColumnView.selectionMode {String}

Enumeration representing the ColumnView selection modes.

Properties:

Name Type Value Description
NONE String none None is default, selection of items does not happen based on click
SINGLE String single Single selection mode, only one item per column can be selected.
MULTIPLE String multiple Multiple selection mode, multiple items per column can be selected.

Instance Properties

instance.activeItem {HTMLElement}

Readonly
Active Item that corresponds to the last item in the path.

instance.columns {Coral.Collection}

Readonly
Collection that holds all the columns inside the ColumnView. See Coral.Collection for more details.

instance.selectedItem {HTMLElement}

Readonly
First selected item of the ColumnView.

instance.selectedItems {Array.<HTMLElement>}

Readonly
Array containing the set selected items. The items will match only one column since selection across columns is not allowed.

instance.selectionMode {Coral.ColumnView.selectionMode}

Selection mode of the ColumnView.
Default Value:
  • Coral.ColumnView.selectionMode.NONE
HTML Attribute:
  • selectionmode

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.setNextColumn

Sets the next column given a reference column. This will handle cleaning the DOM and removing any columns as required.
Parameters:
Name Type Optional Default Description
newColumn HTMLElement No
The new column to add to the column view. It will be placed next to the referenceColumn if provided.
referenceColumn HTMLElement No
The column that will be used as a reference to place the new column. This column needs to be already inside the DOM.
scrollToColumn Boolean Yes
true Whether the columnview show scroll to have the newColumn visible.
Fires:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-columnview:activeitemchange

Triggered when the active item of the column changes.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.column HTMLElement The column whose active item has changed.
event.detail.activeItem HTMLElement The currently active item of the column.
event.detail.oldActiveItem HTMLElement The item of the column that was active before.

coral-columnview:change

Triggered when the selection inside the column change. In case both the selection and the active item change, the coral-columnview:activeitemchange will be triggered first.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.column HTMLElement The column whose selection changed.
event.detail.selection HTMLElement|Array.<HTMLElement> The new selection of the Column.
event.detail.oldSelection HTMLElement|Array.<HTMLElement> The old selection of the Column.

coral-columnview:loaditems

Triggered when additional items can be loaded into the ColumnView. This will happen when the current column can still hold more items, when the user scrolls down the current column or when a new column needs to be loaded. If preventDefault() is called, then a loading indicator will be shown. Coral.ColumnView.Column#loading should be set to false to indicate that the data has been successfully loaded.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.column HTMLElement The column that is requesting more items. While doing pagination, it will become the target of the loaded items.
event.detail.start Number Indicates the current amount of items in the column to do pagination. If item is available, start will be 0 to denote that the column should be loaded from the start.
event.detail.item HTMLElement The item that ininitialized the load. If item is provided, it means that a new column needs to be added after the load is performed. In this scenario, column will be refer to the column that holds the item.

coral-columnview:navigate

Triggered when the navigation is complete and the new columns are ready.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.column HTMLElement The last Column of the ColumnView that is used to determine the path. If the navigate was triggered because a new Coral.ColumnView.Column was added, then it will match that column. In case the path was reduced, the column will match the last column.
event.detail.activeItem HTMLElement The currently active item of the ColumnView.

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

Coral.ColumnView.Item API

Constructor

JavaScript:

new Coral.ColumnView.Item() or document.createElement('coral-columnview-item')

HTML Tag:

<coral-columnview-item>

Extends

Sub-components

Static Properties

Coral.ColumnView.Item.variant {String}

Enum for item variants.

Properties:

Name Type Value Description
DEFAULT String default Default item variant. Contains no special decorations.
DRILLDOWN String drilldown An item with a right arrow indicating that the navigation will go one level down.

Instance Properties

instance.active {Boolean}

Reflected
Whether the item is active.
Default Value:
  • false

instance.content {HTMLElement}

The content of the item.

instance.icon {String}

Specifies the icon that will be placed inside the thumbnail. The size of the icon is always controlled by the component.
Default Value:
  • ""
HTML Attribute:
  • icon

instance.selected {Boolean}

Reflected
Whether the item is selected.
Default Value:
  • false
HTML Attribute:
  • selected

instance.thumbnail {HTMLElement}

The thumbnail of the item. It is used to hold an icon or an image.

instance.variant {Coral.ColumnView.Item.variant}

Reflected
The item's variant.
Default Value:
  • Coral.ColumnView.Item.variant.DEFAULT
HTML Attribute:
  • variant

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

Coral.ColumnView.Column API

Constructor

JavaScript:

new Coral.ColumnView.Column() or document.createElement('coral-columnview-column')

HTML Tag:

<coral-columnview-column>

Extends

Sub-components

Instance Properties

instance.activeItem {HTMLElement}

Readonly
The current active item.

instance.content {HTMLElement}

The content of the column. This container is where the items should be added and is responsible for handling the scrolling.

instance.items {Coral.Collection}

Readonly
The Collection Interface that allows interacting with the items that the component contains. See Coral.Collection for more details.

instance.selectedItem {HTMLElement}

Readonly
Returns the first selected item in the ColumnView. The value null is returned if no element is selected.

instance.selectedItems {Array.<HTMLElement>}

Readonly
Returns an Array containing the set selected items inside this Column.

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

Coral.ColumnView.Preview API

Constructor

JavaScript:

new Coral.ColumnView.Preview() or document.createElement('coral-columnview-preview')

HTML Tag:

<coral-columnview-preview>

Extends

Sub-components

Instance Properties

instance.content {HTMLElement}

The content of the Preview.

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From: