|
|
|
|
AJAX File Browser Panels and Grids Customization
In AJAX File Browser you can customize panels visibility as well as you can hide any columns, change size, style, change column headers, columns order and resize mode. You can also choose if to display folders in Files Panel. The working example could be found here.
Panels Visibility
IT Hit AJAX File Browser consists of 6 panels: Toolbar, Address bar, Folders panel, Files View panel, Upload panel and Upload Progress panel. You can specify visibility of these panels while creating the control or later change visibility at runtime. To specify panels visibility while creating the control use the Panels property of AJAX File Browser Settings Object:
var settings = {
Id: 'AjaxFileBrowserContainer', // ID of the parent control
Url: 'http://webdavserver.com', // the root folder to be displayed
Style: 'height: 100%; width: 100%',
FileIconsPath: '/icons/', // file icons path
MsOfficeTemplatesPath: 'http://webdavserver.com/MSOfficeTemplates/',
SelectedFolder: '/Pictures', // folder to be selected
PluginsPath: '/plugins/', // path to Java applet that opens documents
Panels: {
Folders: { Show: false },
FilesView: { Show: true },
Toolbar: { Show: true },
AddressBar: { Show: true },
UploadPanel: { Show: false },
UploadProgressPanel: { Show: false }
}
};
ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(settings);
As you can see each panel has a Show property that specifies panel visibility. To manage panels visibility at runtime AJAX File Browser provides following methods:
- Folders panel:
SetShowFolders() / GetShowFolders()
- Files View panel:
GetShowFilesView() / SetShowFilesView()
- Toolbar:
SetShowToolbar() / GetShowToolbar()
- Address Bar:
SetShowAddressBar() / GetShowAddressBar()
- Upload panel:
SetShowUploadPanel() / GetShowUploadPanel()
- Upload Progress panel:
SetShowUploadProgressPanel() / GetShowUploadProgressPanel()
For example to hide and show Folders panel use SetShowFolders method:
ajaxFileBrowser.SetShowFolders(false);
To read folders visibility use the GetShowFolders method.
Grids Customization
You can further customize Files View panel and Upload Progress panel by specifying columns visibility, columns size, order, resize mode and style. In addition to ShowColumns array, that contains columns objects and Order array that contains columns order. Each column has an Id that uniquely identifies column in a panel. The Files View panel provides 5 columns with following Ids: Icon, Name, Size, Type and DateModified. The Upload Progress panel has 10 columns with following Ids: Icon, Source, Destination, ProgressBar, Progress, Uploaded, FileSize, Speed, TimeLeft and TimeElapsed.
Below is the example of columns customization:
var settings = {
Id: 'AjaxFileBrowserContainer', // ID of the parent control
Url: 'http://webdavserver.com', // WebDAV server Url
Style: 'height: 100%; width: 100%',
FileIconsPath: '/icons/', // file icons path
MsOfficeTemplatesPath: 'http://webdavserver.com/MSOfficeTemplates/',
SelectedFolder: '/Pictures', // folder to be selected
PluginsPath: '/plugins/', // path to Java applet that opens documents
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
}
]
}
}
};
ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(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 to have a fixed size set the Noresize attribute to true.
comments powered by
|
|
Selected Customers:
| USA |
 |
| Symantec |
| Country: Sweden |
 |
| Toyota |
| Country: USA |
 |
| Microsoft |
| Country: Ukraine |
 |
| Raiffeisen Bank |
| Country: USA |
 |
| Siemens |
| Country: USA |
 |
| Lockheed Martin |
| Country: USA |
 |
| Intel Corporation |
| Country: Germany |
 |
| SAP AG |
| Country: Israel |
 |
| Autodesk, Inc. |
| Country: USA |
 |
| U.S. Customs and Border Protection Agency |
|
|
 |
|