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

Toolbar.items

configuration

Configures the items collection of the toolbar.

toolbar.items

Array

<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.items.attributes

Object

Specifies the HTML attributes of a ToolBar button.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            items: [
                { 
                    name: "createFolder", 
                    attributes: { 
                        "data-role": "button",
                        "title": "Create a new folder"
                    } 
                }
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.items.click

Function

Specifies the click handler of the button.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            items: [
                { 
                    name: "custom", 
                    text: "Custom",
                    click: function() {
                        alert("Custom button clicked");
                    }
                }
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.items.command

String

Specifies the command of the button.

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

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

toolbar.items.enable

Boolean

Specifies whether the control is initially enabled or disabled. Default value is "true".

Default: true

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

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

toolbar.items.hidden

Boolean

Determines if a button is visible or hidden. By default buttons are visible.

Default: false

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

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

toolbar.items.icon

String

Sets icon for the item. The icon should be one of the existing in the Kendo UI theme sprite.

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

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

toolbar.items.id

String

Specifies the ID of the button.

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

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

toolbar.items.imageUrl

String

If set, the ToolBar will render an image with the specified URL in the button.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            items: [
                { name: "createFolder", imageUrl: "/path/to/folder-icon.png" }
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.items.name

String

Specifies the name of the button.

<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.items.options

String

Specifies the command options of the button.

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

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

toolbar.items.overflow

String

Specifies the overflow of the button.

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

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

toolbar.items.primary

Boolean

Specifies whether the button is primary. Primary buttons receive different styling.

Default: false

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

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

toolbar.items.showIcon

String

Specifies where the button icon will be displayed. Possible values are: "toolbar", "overflow" or "both" (default).

Default: "both"

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

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

toolbar.items.showText

String

Specifies where the text will be displayed. Possible values are: "toolbar", "overflow" or "both" (default).

Default: "both"

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

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

toolbar.items.spriteCssClass

String

Defines a CSS class (or multiple classes separated by spaces) which will be used for button icon.

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

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

toolbar.items.template

String|Function

Specifies what element will be added in the ToolBar wrapper. Items with template does not have a type.

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

    $("#fileManager").kendoFileManager({
        toolbar: {
            items: [
                { template: "<button class='k-button'>Custom Button</button>" }
            ]
        },
        dataSource: {
            transport: {
                read: {
                    method: "POST",
                    url: baseUrl + "Read"
                }
            }
        }
    });
</script>

toolbar.items.text

String

Sets the text of the button.

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

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

toolbar.items.togglable

Boolean

Specifies if the button is togglable, e.g. has a selected and unselected state.

Default: false

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

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

toolbar.items.type

String

Specifies the type of the button.

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

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