CKFinder 3 Documentation

List View

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.