AJAX File Browser Grids Customization
You can customize Files View panel and Upload Progress panel by specifying columns visibility, columns size, order, resize mode and style. The demo could be found here.
In addition to Show property, described in Panels Customization article, panels has 2 additional properties: Columns array, that contains columns objects and Order array that contains columns order. Each column has an Id that uniquely identifies column within a panel. The Files View panel provides 5 columns with following Ids:
Icon, Name, Size, Type, DateModified.
The Upload Progress panel has 10 columns with following Ids:
Icon, Source, Destination, ProgressBar, Progress, Uploaded, FileSize, Speed, TimeLeft, TimeElapsed.
Below is an example of columns customization:
var settings = {
BasePath: '/', // path to ajax file browser files
Id: 'AjaxFileBrowserContainer', // ID of the parent control
Url: 'http://webdavserver.com', // WebDAV server Url
Style: 'height: 100%; width: 100%',
MsOfficeTemplatesPath: 'http://webdavserver.com/MSOfficeTemplates/',
SelectedFolder: '/Pictures', // folder to be selected
Panels: {
FilesView: {
Show: true,
Order: ['Size', 'Name', 'Icon'],
Columns: [
{
Id: 'Icon',
Show: true,
},
{
Id: 'Name',
Text: 'My Caption',
Tooltip: 'My Tooltip',
Width: '350px',
CellStyles: { textAlign: 'right', color: 'blue', fontWeight: 'bold' },
HeaderStyles: { textAlign: 'right' }
},
{
Id: 'Size',
Show: true
},
{
Id: 'Type',
Show: false
},
{
Id: 'DateModified',
Show: false
}
]
},
UploadProgressPanel: {
Show: true,
Order: ['Icon', 'TimeLeft', 'ProgressBar', 'Source'],
Columns: [
{
Id: 'Icon',
Show: true
},
{
Id: 'Source',
Show: false
},
{
Id: 'Destination',
Show: true,
Width: 'auto'
},
{
Id: 'ProgressBar',
Show: true,
Width: '180px'
},
{
Id: 'Progress',
Show: false
},
{
Id: 'Uploaded',
Show: false
},
{
Id: 'FileSize',
Show: true
},
{
Id: 'Speed',
Show: false
},
{
Id: 'TimeLeft',
Show: true,
Noresize: 'true'
},
{
Id: 'TimeElapsed',
Show: false
}
]
}
}
};
var ajaxFileBrowserLoader = new ITHit.WebDAV.Client.AjaxFileBrowserLoader(settings);
As a column size, you can specify either fixed size or specify 'auto' that will make the column to stretch. To make the column have a fixed size set the No resize the attribute to true.
Adding Custom Columns
In Ajax File Browser, you can add your own custom columns. The columns can display either data from Custom Properties returned by the server or just display any data returned by your JavaScript function (Formatter).
Displaying data from custom properties
To display data from custom properties specify CustomPropertyName and CustomPropertyNamespace as part of column properties:
{
Id: 'MyProp',
CustomPropertyName: 'Prop',
CustomPropertyNamespace: 'MyNs',
Text: 'My Prop (MyNs:Prop)',
Width: '120px'
}
The Ajax File Browser will detect columns with CustomPropertyName and CustomPropertyNamespace properties and will automatically request Custom Properties specified in these fields.
Displaying data from Formatter function
You have the full control over what will be displayed in your custom column with Formatter function. From this function, you can return any HTML or text that will be displayed in the table cell. The following example displays data about locks applied to the item in custom column:
Panels: {
FilesView: {
Columns: [
{
Id: 'MyLockedBy',
Text: 'My Locked By',
Width: '120px',
Formatter: function (oHierarchyItem, iRowIndex) {
var oNs = ITHit.WebDAV.Client;
var sLockText = '';
for (var i = 0; i < oHierarchyItem.ActiveLocks.length; i++) {
if (i > 0)
sLockText += '; '
var oLockInfo = oHierarchyItem.ActiveLocks[i];
var sScope = oLockInfo.LockScope === oNs.LockScope.Shared ? 'Shared' : 'Exclusive';
sLockText += oLockInfo.Owner + ' (' + sScope + ') ';
}
if (oHierarchyItem.ActiveLocks.length === 0) {
sLockText = 'Unlocked';
}
return sLockText;
}
}
]
}
}
-
The first parameter is the HierarchyItem javascript object that contains all information about the data in this particular row.
-
The second parameter is the row index. As soon as you can return HTML you can use it to set color the cell for odd rows, for example.
Customizing Each Folder Individually
You can customize each folder individually at runtime. In the BeforeSelectedFolderChanged event, you can set a list of columns you wish to display using settings object and SetSettings method.
Just like SelectedFolderChanged event, the BeforeSelectedFolderChanged is fired when user navigates folder structure or searching, but is fired before the navigation occurs, so you can customize the columns depending on the folder the user is navigating to or to cancel the navigation. This event has 3 parameters:
function onBeforeSelectedFolderChanged(currentFolder, targetFolder, searchOptions) {
...
}
-
Current folder, from which user is navigating. This parameter is null when Ajax File Browser is created and navigation to the first folder occurs.
-
Target folder, to which user is navigating. This parameter is null when user is searching.
-
Search Options. The object that contains search options. This parameter is always null except when user is searching. You can use it to distinguish search results from any other locations and customize search results to your needs.
In this event, you can cancel navigation returning false.
Below you can see a sample implementation that customizes '/Library/' folder:
var ajaxFileBrowser;
var settings;
function initAjaxFileBrowser() {
settings = {
...
};
var loader = new ITHit.WebDAV.Client.AjaxFileBrowserLoader(settings);
loader.oninit = function (ajaxBrowser) {
ajaxFileBrowser = ajaxBrowser;
ITHit.Events.AddListener(ajaxFileBrowser, 'OnBeforeSelectedFolderChanged', onBeforeSelectedFolderChanged);
};
loader.LoadAsync(); // starts loading Ajax File Browser files asynchronously
}
function onBeforeSelectedFolderChanged(currentFolder, targetFolder, searchOptions) {
//targetFolder is null in case of search results
if ((targetFolder !== null) && (targetFolder.Href === 'http://webdavserver.com/Documents/')) {
alert("In BeforeSelectedFolderChanged event you can cancel navigation.");
return false;
}
var settingsLib = {
Panels: {
FilesView: {
Columns: [
{
Id: 'Type',
Show: false
},
{
Id: 'DateModified',
Show: false
},
{
Id: 'EditMsDoc',
Width: '22px',
Formatter: function (oHierarchyItem, iRowIndex) {
var oNs = ITHit.WebDAV.Client.DocManager;
if (oNs.IsMicrosoftOfficeDocument(oHierarchyItem.Href)) {
var editBtn = '<div class="btnQuick btnMsEdit" onclick="ITHit.WebDAV.Client.DocManager.MicrosoftOfficeEditDocument(\'' + oHierarchyItem.Href + '\')"></div>';
return editBtn;
}
}
},
{
Id: 'Download',
Width: '22px',
Formatter: function (oHierarchyItem, iRowIndex) {
return '<div class="btnQuick btnDownload" onclick="window.open(\'' + oHierarchyItem.Href + '?download\')"></div>';
}
}
]
}
}
};
// here we will customize columns depending on to which folder user is navigating to
if ((targetFolder !== null) && (targetFolder.Href === 'http://webdavserver.com/Library/')){
ajaxFileBrowser.SetSettings(settingsLib);
}
else{
ajaxFileBrowser.SetSettings(settings);
}
}