List View
Contents
The aim of this article is to explain how to extend List View columns in CKFinder.
Changing columns priority
Default priority of CKFinder's List View columns are:
* icon
- priority: 10
* name
- priority: 20
* size
- priority: 30
* date
- priority: 40
Columns are defined on listview:columns event. Columns definitions are kept
in the data.columns
parameter of the listener callback function argument. Note: not all default columns might be available
on this event since user might change displayed fields using settings panel.
In the example below size column is put after date column.
finder.on( 'listView:columns', function( evt ) {
var sizeColumn = evt.data.columns.findWhere( { name: 'size' } );
if ( sizeColumn ) {
sizeColumn.set( 'priority', 40 );
}
var dateColumn = evt.data.columns.findWhere( { name: 'date' } );
if ( dateColumn ) {
dateColumn.set( 'priority', 30 );
}
} );
Adding custom columns
Adding a custom column requires two steps: adding a column definition and providing view for a column.
Adding custom column definition
To add a column listen to listview:columns event. Listener can add column
definition to the data.columns
parameter. Column definition must contain the following fields:
* name
- name of a column used by events.
* label
- label displayed as a column header.
* priority
- sorting priority of a column.
Example below presents adding a custom column definition:
finder.on( 'listView:columns', function( evt ) {
evt.data.columns.push( {
name: 'type',
label: 'Type',
priority: 25 // Column will be displayed after name column
} );
} );
Providing views for a column
To render a file's or folder's column you must listen on listview:file:column:NAME
and listview:folder:column:NAME events. As a NAME
part of event name
use a value chosen when defining column in listview:columns event.
CKFinder 3.3+
From CKFinder 3.3 the rendering of files pane has changed. CKFinder 3.3 no longer use ItemView instances to render files or folders in files pane. You should provide a template for rendering a whole view.
Below is an example of providing template for columns:
// Add a template for file
finder.on( 'listView:file:column:type', function( evt ) {
evt.data.template = '<td>{{= it.getType( it.name ) }}</td>';
evt.data.templateHelpers = {
getType: function( name ) {
var extension = name.substr( name.lastIndexOf( '.' ) + 1 ).toLowerCase();
if ( /(jpg|jpeg|gif|png)/.test( extension ) ) {
return 'Image';
}
if ( /(doc|docx|pdf)/.test( extension ) ) {
return 'Document';
}
return 'Other';
}
};
} );
// Add a view for folder
finder.on( 'listView:folder:column:type', function( evt ) {
evt.data.template = '<td>Folder</td>';
} );
CKFinder 3.0 - 3.2
Below is an example of providing views for columns:
var ItemView = finder.Backbone.Marionette.ItemView;
// Add a view for file
finder.on( 'listView:file:column:type', function( evt ) {
evt.data.view = ItemView.extend( {
tagName: 'td',
template: finder.doT.template( '{{= it.getType( it.name ) }}' ),
templateHelpers: {
getType: function ( name ) {
var extension = name.substr( name.lastIndexOf( '.' ) + 1 ).toLowerCase();
if( /(jpg|jpeg|gif|png)/.test( extension ) ) {
return 'Image';
}
if( /(doc|docx|pdf)/.test( extension ) ) {
return 'Document';
}
return 'Other';
}
}
} );
} );
// Add a view for folder
finder.on( 'listView:folder:column:type', function( evt ) {
evt.data.view = ItemView.extend( {
tagName: 'td',
template: finder.doT.template( 'Folder' )
} );
} );
Example
See the CustomColumn plugin for a complete example of a plugin that adds a custom column.