Preview Pane Overview
The Preview Pane shows additional information about the selected files or folders in the view.
The preview pane visibility could be toggled by the Switch Tool in the FileManager Toolbar. By default, it shows the following information about the selected file or folder:
- Thumbnail, representing the file
- File extension
- File size
- Date created
- Date modified
The metaFields object in the PreivewPane configuration, allows you to control which fields from the above-enumerated should be displayed. If you need to show only the Extension and Size information in the Preview Pane, the configuration would be as follows:
<div id="filemanager"></div>
$("#filemanager").kendoFileManager({
previewPane: {
metaFields: ["extension", "size"]
},
dataSource: {
data: myData
}
});
Customize Preview Pane
You can customize the Preview Pane layout by specifying a kendo template. The Pane accepts the following templates:
- noFileTemplate: String | Function - Template when no file/folder is selected
- singleFileTemplate: String | Function - Template when only a single file/folder is selected
- multipleFilesTemplate: String | Function - Template when multiple files/folders are selected
The following example demonstrates a singleFileTemplate declaration in the FileManager
<div id="filemanager"></div>
$("#filemanager").kendoFileManager({
previewPane: {
singleFileTemplate: kendo.template($("#preview-template").html())
},
dataSource: {
data: myData
}
});
<script id="preview-template" type="text/kendo-ui-template">
<div class="#=styles.fileInfo#">
<div class="#=styles.filePreviewWrapper#">
<span class="k-icon k-i-#=kendo.getFileGroup(selection[0].extension, true)#"></span>
</div>
<div class="#=styles.fileTitleWrapper#">
<span class="#=styles.fileTitle#">#=selection[0].name#</span>
</div>
#if(metaFields){#
<dl class="#=styles.fileMetaWrapper#">
#for(var i = 0; i < metaFields.length; i+=1){#
#var field = metaFields[i]#
<dt class="#=styles.metaLabel#">#=messages[field]#: </dt>
<dd class="#=styles.metaValue# #=styles[field]#">
#if(field == "size"){#
#=kendo.getFileSizeMessage(selection[0][field])#
#} else if(selection[0][field] instanceof Date) {#
#=kendo.toString(selection[0][field], "G")#
#} else if(field == "extension") {#
#=kendo.getFileGroup(selection[0].extension)#
#} else {#
#=selection[0][field]#
#}#
</dd>
<dd class="line-break"></dd>
# } #
</dl>
#}#
</div>
</script>