toolbar - API Reference - Kendo UI FileManager

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

configuration

Configures the Toolbar of the FileManager

Boolean | Object

Default: true

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            items: [
                { name: "createFolder" },
                { name: "upload" },
                { name: "search" }
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.click

Function

Fires when the user clicks a command button. Toolbar Events.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            click: function(e) {
                console.log("Toolbar button clicked: " + e.id);
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.close

Function

Fires when the SplitButton's popup closes. Toolbar Events.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            close: function(e) {
                console.log("Toolbar popup closed");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.items

Array

Configures the items collection of the toolbar.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            items: [
                { name: "createFolder" },
                { name: "upload" },
                { name: "sortDirection" },
                { name: "sortField" },
                { name: "changeView" },
                { name: "spacer" },
                { name: "details" },
                { name: "search" }
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

Apart from the built-in tools, the FileManager fully exposes the ToolBar.items API. This way you can specify any custom tools in the widget using the components available in the ToolBar itself.

toolbar.open

Function

Fires when the Split Button's popup opens. Toolbar Events.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            open: function(e) {
                console.log("Toolbar popup opened");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.overflow

Object

Specifies Toolbar.overflow configuration for the toolbar.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            overflow: {
                mode: "menu"
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.overflowClose

Function

Fires when the overflow popup container is about to close. Toolbar Events.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            overflowClose: function(e) {
                console.log("Toolbar overflow popup is closing");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.overflowOpen

Function

Fires when the overflow popup container is about to open. Toolbar Events.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            overflowOpen: function(e) {
                console.log("Toolbar overflow popup is opening");
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.toggle

Function

Fires when the user changes the checked state of a toggle button. Toolbar Events.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            toggle: function(e) {
                console.log("Toolbar button toggled: " + e.checked);
            }
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

Related Members