Selecting items in Ajax File Browser and selection events

In this article

Selecting items in Ajax File Browser and selection events

Selecting Folder Node in a Tree

While you can set selected node via settings, you can also do this programmatically. To set the selected node call SetSelectedFolderAsync method. This method, as well as other methods that manipulate Ajax  Browser, must be called in loader init event or after that:

ajaxFileBrowserLoader.oninit = function(ajaxFileBrowser) {
ajaxFileBrowser.SetSelectedFolderAsync('http://webdavserver.com/folder/');
};

The SetSelectedFolderAsync call will load files and folders list in the files view panel of the control and automatically expand necessary tree nodes if required.

Important! To avoid circular calls, when you set the property programmatically the corresponding event is not fired. For example, if you set the selected folder calling SetSelectedFolderAsync method, the SelectedFolderChanged event is not fired. If you wish the event to be fired, set the second parameter of SetSelectedFolderAsync to false.

Here are the parameters of SetSelectedFolderAsync method:

  • sPath – (required) item path to be selected in a tree. For example '/folder/test/'
  • bSilent – (optional) this parameter is false the SelectedFolderChanged and SelectedItemsChanged events will be fired. Default is true.
  • fCallback – (optional) function to be called when operation is completed.

To get the selected tree node use GetSelectedFolder method. It will return HierarchyItem JavaScript object or null if nothing is selected:

var item = ajaxFileBrowser.GetSelectedFolder(); 
alert(item.Href);

Getting and Setting List of Selected Files and Folders

You can use the AJAX Browser control for creating File Open / Select dialogs. To get a list of selected items use GetSelectedItems method. It will return an array of HierarchyItem JavaScript objects:

var selectedItemUrls = '';
var aSelectedHierarchyItems = ajaxFileBrowser.GetSelectedItems();
for(var i=0; i<aSelectedHierarchyItems.length; i++){
    selectedItemUrls += aSelectedHierarchyItems[i].Href + ' ';
}

To set selected item in a control use SetSelectedItemsAsync method. To this method, you must pass either array of URLs or array of HierarchyItem objects:

var aSelectedItems = new Array();
aSelectedItems[0] = 'http://webdavserver.com/folder/file.doc';
aSelectedItems[1] = 'http://webdavserver.com/folder/install.exe';
aSelectedItems[2] = 'http://webdavserver.com/folder/';
ajaxFileBrowser.SetSelectedItemsAsync(aSelectedItems);

The tree will expand to show content of the necessary folder if required. Note that all items must be located in the same folder. All items located in the folder other than the first item will be ignored. 

Here are the parameters of this method:

  • aPath – (required)  either array of URLs or array of HierarchyItem objects to be selected in Files Panel. 
  • bSilent – (optional) this parameter is false the SelectedFolderChanged and SelectedItemsChanged events will be fired. Default is true. 
  • fCallback – (optional) function to be called when operation is completed.

Selection Events

When user selects the folder in a tree the SelectedFolderChanged event is fired. When selected items change the SelectedItemsChanged event is fired:

ITHit.Events.AddListener(ajaxFileBrowser, 'OnSelectedFolderChanged', onSelectedFolderChanged);
ITHit.Events.AddListener(ajaxFileBrowser, 'OnSelectedItemsChanged', onSelectedItemsChanged);
...

function onSelectedItemsChanged() {
    var selectedItemsInput = document.getElementById('SelectedItems');
    selectedItemsInput.value = "";
    var aSelectedHierarchyItems = ajaxFileBrowser.GetSelectedItems();
    for (var i = 0; i < aSelectedHierarchyItems.length; i++) {
        selectedItemsInput.value += aSelectedHierarchyItems[i].Href + '\n';
    }
}
function onSelectedFolderChanged() {
    alert(ajaxFileBrowser.GetSelectedFolder().Href);
}

AJAX Browser Control Events Demo

OnOpenItem Event

By default, when user double clicks on a file or folder or presses 'Enter' the file is opened by the web browser. You can customize this behavior hooking to OnOpenItem event:

ITHit.Events.AddListener(ajaxFileBrowser, 'OnOpenItem', onOpenItem); 
...

function onOpenItem(oHierarchyItem) {
    if (oHierarchyItem.ResourceType  != ITHit.WebDAV.Client.ResourceType.Folder) {
     return false;
  }
}

The AJAX Browser passes the HierarchyItem which is being opened. This could be a file or a folder. In this event handler, you can suppress the default behavior returning false as a return value.

Using the IT Hit WebDAV Ajax Library from Ajax Browser

In case you need to access your WebDAV server programmatically you can use the IT Hit WebDAV Ajax Library, which is part of Ajax Browser and built on top of it.

You can access the core component of WebDAV Ajax Library, the WebDavSession object, using the following call:

var ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(...);
var session = ajaxFileBrowser.GetSession();

You can find more about how to use the WebDAV Ajax Library API here.

The WebDAV Ajax Library class reference could be found here: http://ajax.webdavsystem.com/

 

Next Article:

Opening Documents from WebDAV Server