Creating Custom Dialogs
The Ajax File Browser provides API for creating custom dialogs that has look and fill of the Ajax File Browser interface. You can find a complete example of a custom dialog here.
To show a custom dialog use the ShowDialog method call:
ajaxFileBrowser.ShowDialog(html, { width: '500px' }, 'My Custom Dialog');
It has hollowing parameters:
html - HTML to display in the dialog.
style - style of the dialog. You will usually specify only the width of the dialog here.
title - Title of the dialog.
To close the dialog call ITHit.WebDAV.Client.AjaxFileBrowser.Controller.HideDialog() static method.
The following example creates a custom dialog that display folder selected in Folders Panel, items selected in Files Panel and items under the context menu:
function showMyDialog(aContextMenuHierarchyItems) {
// Get item(s) selected under context menu.
var contextItemsText = '';
if (aContextMenuHierarchyItems != null) {
for (var i = 0; i < aContextMenuHierarchyItems.length; i++) {
contextItemsText += aContextMenuHierarchyItems[i].Href + '<br/>';
}
}
// Get Folder selected in Folders Panel.
var folderHierarchyItem = ajaxFileBrowser.GetSelectedFolder();
// Get item(s) selected in Files View Panel.
var aSelectedHierarchyItems = ajaxFileBrowser.GetSelectedItems();
var selectedItemsText = '';
for (var i = 0; i < aSelectedHierarchyItems.length; i++) {
selectedItemsText += aSelectedHierarchyItems[i].Href + '<br/>';
}
var html = '<table cellspacing="10" style="width:100%">' +
'<tr><td style="width:60px; vertical-align:top" nowrap="">Context Menu Item(s):</td><td nowrap="">' + contextItemsText + '</td></tr>' +
'<tr><td nowrap="">Selected Folder:</td><td nowrap="">' + folderHierarchyItem.Href + '</td></tr>' +
'<tr><td style="vertical-align:top" nowrap="">Selected Item(s) in Files View Panel:</td><td nowrap="">' + selectedItemsText + '</td></tr>' +
'<tr><td>Some Field:</td><td><input type="text1" id="test" ihDojoType="dijit.form.TextBox" style="width:100%; margin:0;" /></td></tr>' +
'<tr><td colspan="2" style="padding-top: 15px; text-align: right; ">' +
'<button type="button" ihDojoType="dijit.form.Button" class="ihDialogButton" iconClass="iconOk" onclick="okHandler();" >Submit</button>' +
'<button type="button" ihDojoType="dijit.form.Button" class="ihDialogButton" iconClass="iconCancel" onclick="ITHit.WebDAV.Client.AjaxFileBrowser.Controller.HideDialog();" >' + ITHit.Phrases.AjaxFileBrowser.Interface.Cancel + '</button>' +
'</td></tr>' +
'</table>';
ajaxFileBrowser.ShowDialog(html, { width: '500px' }, 'My Custom Dialog');
}
|