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.
English
Français
Document
Show Markup
<coral-columnview>
<coral-columnview-column>
<coral-columnview-column-content>
<coral-columnview-item variant="drilldown" icon="folder">English</coral-columnview-item>
<coral-columnview-item variant="drilldown" icon="folder">Français</coral-columnview-item>
<coral-columnview-item variant="drilldown" icon="file">Document</coral-columnview-item>
</coral-columnview-column-content>
</coral-columnview-column>
</coral-columnview>
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
<coral-columnview class="guide-columnview-example">
<coral-columnview-column>
<coral-columnview-column-content>
<coral-columnview-item variant="drilldown" icon="folder">English</coral-columnview-item>
<coral-columnview-item variant="drilldown" icon="folder">Français</coral-columnview-item>
<coral-columnview-item variant="drilldown" icon="file">Document</coral-columnview-item>
</coral-columnview-column-content>
</coral-columnview-column>
<coral-columnview-preview>
<coral-columnview-preview-content>
<coral-columnview-preview-asset>
<coral-icon icon="file" size="L"></coral-icon>
</coral-columnview-preview-asset>
<coral-columnview-preview-label>Name</coral-columnview-preview-label>
<coral-columnview-preview-value>document.txt</coral-columnview-preview-value>
<coral-columnview-preview-label>Title</coral-columnview-preview-label>
<coral-columnview-preview-value>The Document</coral-columnview-preview-value>
<coral-columnview-preview-label>File Size</coral-columnview-preview-label>
<coral-columnview-preview-value>5MB</coral-columnview-preview-value>
<coral-columnview-preview-label>Modified</coral-columnview-preview-label>
<coral-columnview-preview-value>2 hours ago</coral-columnview-preview-value>
<coral-columnview-preview-label>Type</coral-columnview-preview-label>
<coral-columnview-preview-value>application/vnd.oasis.opendocument.text-web</coral-columnview-preview-value>
<coral-columnview-preview-separator></coral-columnview-preview-separator>
<coral-columnview-preview-label>Publish Status</coral-columnview-preview-label>
<coral-columnview-preview-value>
<coral-icon icon="check" size="XS"></coral-icon>
</coral-columnview-preview-value>
<coral-columnview-preview-separator></coral-columnview-preview-separator>
<coral-columnview-preview-label>References</coral-columnview-preview-label>
<coral-columnview-preview-value>
<coral-icon icon="link" size="XS"></coral-icon>2
</coral-columnview-preview-value>
</coral-columnview-preview-content>
</coral-columnview-preview>
</coral-columnview>
The following examples demonstrate usage of the JavaScript API's for Coral.ColumnView.
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.
<script>
$(document).ready(function() {
var columnView = new Coral.ColumnView().set({
id: 'guide-columnView-multiple-0',
selectionMode: 'multiple'
});
var columnViewColumn = new Coral.ColumnView.Column().set({
id: 'guide-columnViewColumn-multiple-0'
})
// Add the data-src attribute, which is red in the loaditems event-listener
columnViewColumn.setAttribute('data-src', 'resources/columnview/content.html');
columnView.appendChild(columnViewColumn);
var constructorExample = document.getElementById('constructorExample');
constructorExample.appendChild(columnView);
});
</script>
<coral-columnview class="coral3-ColumnView" role="tree" tabindex="0" id="guide-columnView-multiple-0"><coral-columnview-column class="coral3-ColumnView-column" role="group" id="guide-columnViewColumn-multiple-0" data-src="resources/columnview/content.html"><coral-columnview-column-content></coral-columnview-column-content></coral-columnview-column></coral-columnview>
The following shows how to listen for the coral-columnview:loaditems event and use setNextColumn.
<script>
$(document).ready(function() {
var eventLog = $('#columnViewLog');
document.addEventListener('coral-columnview:loaditems', function(event) {
var cv = event.target;
var item = event.detail.item;
var column = event.detail.column;
// if item is set, it means we load the item content
var url = item ? $(item).attr('data-src') : $(column).attr('data-src');
// there is no information on additional items
if (typeof url === 'undefined') {
return;
}
console.log('Loading: %s', url);
$.ajax({
url: url
}).done(function(data) {
var $data = $(data);
// if it is a preview column we add it directly
if ($data.is('coral-columnview-preview')) {
cv.setNextColumn($data[0], column);
}
else {
// otherwise we treat it as a normal column
var $contentWrapper = $data.find('coral-columnview-column-content').first();
var $columnWrapper = $contentWrapper.closest('coral-columnview-column');
if ($contentWrapper.length > 0) {
if (item) {
// adds an unique id to be able to identify the column
$data[0].id = Coral.commons.getUID();
// we add the new column and scroll to it
cv.setNextColumn($data[0], column);
}
// we load data in the current column
else {
// update the source of the current column (so that lazyloading does work)
var nextSrcToLoad = $($columnWrapper).attr('data-src');
if (!nextSrcToLoad) {
column.removeAttribute('data-src');
}
else {
column.setAttribute('data-src', nextSrcToLoad);
}
// update the content
$(column.content).append($contentWrapper.html());
}
}
}
});
});
});
</script>
The following shows how to listen for events generated by the ColumnView above.
<script>
$(document).ready(function() {
var eventLog = $('#columnViewLog');
var columnView = document.getElementById('guide-columnView-multiple-0');
columnView.on('coral-columnview:change', function(e) {
eventLog.log(e.type);
});
columnView.on('coral-columnview:loaditems', function(e) {
eventLog.log(e.type + ' ' + ' start: ' + event.detail.start + ' column: ' + event.detail.column.id);
});
columnView.on('coral-columnview:activeitemchange', function(e) {
var logMessage = e.type + ' new: "' + $(event.detail.activeItem).text() + '" old: "' + $(event.detail.oldActiveItem).text();
eventLog.log(logMessage);
});
});
</script>