Creating Custom Dialogs

The Ajax File Browser provides API for creating custom dialogs. 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>' +


    ajaxFileBrowser.ShowDialog(html, { width: '500px' }, 'My Custom Dialog');


Next Article:

History Navigation