New to Kendo UI for jQuery? Start a free 30-day trial

PreviewPane

configuration

Configures the Preview Pane of the FileManager.

previewPane

Object

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        previewPane: {
            metaFields: ["created", "size", "extension"]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

previewPane.metaFields

Array

Configures the meta fields to be showed in the preview pane.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        previewPane: {
            metaFields: ["created", "createdUtc", "size"]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

previewPane.multipleFilesTemplate

String|Function

Defines a new template for the preview pane when multiple files/folders are selected.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        previewPane: {
            multipleFilesTemplate: "<div><h3>#: files.length # files selected</h3></div>"
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

previewPane.noFileTemplate

String|Function

Defines a new template for the preview pane when no file/folder is selected.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        previewPane: {
            noFileTemplate: "<div class='no-file-message'>Please select a file to preview</div>"
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

previewPane.singleFileTemplate

String|Function

Defines a new template for the preview pane when a single file/folder is selected.

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/service/v2/core/filemanager/";

    $("#fileManager").kendoFileManager({
        previewPane: {
            singleFileTemplate: "<div><h3>#: name #</h3><p>Size: #: size # bytes</p></div>"
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>