AJAX File Browser Toolbar Customization
Ajax File Browser provides toolbar customization capabilities. When creating AJAX File browser you can add your custom buttons, hide default buttons as well manage visibility, text and other properties. Your custom button can contain text, image or both as well any custom HTML providing the same look and fill with Ajax File Browser UI. You can see a working example of Toolbar customization here.
The Toolbar panel provides Items property that contains an array of toolbar items and Order property where you can specify item order. Each item on a toolbar has its unique Id. When you add your own items you must specify the Id that is unique within a toolbar. Below is the example of toolbar customization:
<style type="text/css">
.iconBackward,
.iconForward,
.iconBookmarkSave,
.iconBookmarkRemove {
background-repeat: no-repeat;
width: 16px;
height: 16px;
text-align: center;
margin-right:0px;
}
.iconBackward {background-image: url('/Backward.png');}
.iconForward {background-image: url('/Forward.png');}
.iconBookmarkSave {background-image: url('/BookmarkSave.png');}
.iconBookmarkRemove {background-image: url('/BookmarkRemove.png');}
</style>
<script type="text/javascript">
var settings = {
BasePath: '/', // path to ajax file browser files
Id: 'AjaxFileBrowserContainer', // ID of the parent control
Url: 'http://webdavserver.com', // WebDAV server
Style: 'height: 100%; width: 100%',
MsOfficeTemplatesPath: 'http://webdavserver.com/MSOfficeTemplates/',
SelectedFolder: '/Pictures', // folder to be selected
Panels: {
Folders: {
Show: true
},
FilesView: {
Show: true
},
Toolbar: {
Show: true,
Order: ['Backward', 'Forward', 'MyButton', 'MyImgButton', 'MyDisabledButton', 'FoldersButton', 'UpButton', 'BookmarksDropdown', 'Bookmark'],
Items: [
{
Id: 'FoldersButton',
Text: 'Show/Hide Folders',
Show: false
},
{
Id: 'UpButton',
Show: false
},
{
Id: 'Backward',
Type: 'Button',
IconClass: 'iconBackward',
Disabled: true,
OnClick: backward
},
{
Id: 'Forward',
Type: 'Button',
IconClass: 'iconForward',
Disabled: true,
OnClick: forward
},
{
Id: 'BookmarksDropdown',
InnerHTML: '<select id="bookmarks" onchange="gotoBookmark();" style="font-size: smaller; width: 150px; margin-left:15px" ><option value="">< My custom bookmarks ></option></select>'
},
{
Id: 'Bookmark',
Type: 'Button',
IconClass: 'iconBookmarkSave',
Text: 'Save Bookmark',
OnClick: bookmark
}
]
},
AddressBar: {
Show: false
},
UploadPanel: {
Show: false
},
UploadProgressPanel: {
Show: false
}
}
};
var ajaxFileBrowserLoader = new ITHit.WebDAV.Client.AjaxFileBrowserLoader(settings);
...
</script>
For each button, you can specify a function that will be called when user clicks on a button, CSS class name that will be used to create an image, text on a button and tooltip. You can also specify if the button is enabled or disabled. To manage buttons at runtime, you will use the AjaxFileBrowser.GetControl method, passing the Id of the button as a parameter. This call will return a Button object that you will use to further set and get attributes and call methods. In the example below the button with 'Bookmark' Id is disabled and its text and image is being set:
function bookmark() {
var button = ajaxFileBrowser.GetControl('Bookmark');
button.SetText('Remove Bookmark'); // set text
button.SetIconClass('iconBookmarkRemove'); // set image
button.SetDisabled(true);
}