In our v15.1 release we have another exciting feature implemented for the ASP.NET File Manager. Template support for the File Container!
What is the File Container?
The ASP.NET File Manager control contains a tool bar and two panes; a Folder Container and a File Container as illustrated in the image below:
What does this mean?
With the template support for the items inside the File Container, you can now change how files are represented, and depending on the template, add some custom functionality to the individual items. There are 2 different templates you can implement, one for the Thumbnail view and one for the Details view.
The item which is used to bind the template to is a FileManagerItem instance. At runtime this will be either a FileManagerFile or a FileManagerFolder type, depending on the item being processed.
The FileManagerItem type exposes the following properties available for data binding:
- FullName
- Id
- LastWriteTime
- Length
- Name
- RelativeName
- ThumbnailUrl
The FileManagerFile type, which descends from the FileManagerItem type, exposes all the properties above plus 2 additional ones:
The FileManagerFolder also descends from the FileManagerItem type and has one additional property:
How can I use this feature?
Let’s assume you want to use the DevExpress ASP.NET FileManager for displaying image thumbnails with the possibility to preview the image in a popup:
This behaviour can be build by using the following template:
1: <ItemTemplate>
2: <div style="<%# GetThumbStyle(Container.DataItem) %>">
3: <div style="width: 100%; height: 30px;" class="transparent">
4: <div style="float:left">
5: <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False"
6: UseSubmitBehavior="False"
7: ImageSpacing="0px" RenderMode="Link"
8: ClientSideEvents-Click='<%# GetPreviewClick(Container.DataItem) %>'>
9: <Paddings Padding="0px" />
10: <Image IconID="actions_show_16x16">
11: </Image>
12: </dx:ASPxButton>
13: </div>
14: <div style="float:left;padding-left:5px;">
15: <span class="item-name">
16: <%# Path.GetFileNameWithoutExtension((string)Eval("Name")) %><br />
17: <%# String.Format("{0:#,##0} kb", Convert.ToDouble(Eval("Length"))/1024)%>
18: </span>
19: </div>
20: </div>
21: </div>
22: </ItemTemplate>
For this template to work, I have created some C# helper methods for the data binding. They look like:
1: protected string GetPreviewClick(object item)
2: {
3: FileManagerFile file = item as FileManagerFile;
4: if (file != null)
5: {
6: return String.Format("function(s, e) {{ previewDlg.PerformWindowCallback(previewDlg.GetWindow(0), '{0}')}}",
7: VirtualPathUtility.ToAbsolute(file.FullName));
8: }
9: return "";
10: }
11:
12: protected string GetThumbStyle(object item)
13: {
14: List<string> result = new List<string>();
15: FileManagerFile file = item as FileManagerFile;
16: if (file != null)
17: {
18: result.Add(String.Format("width: {0}", fm.SettingsFileList.ThumbnailsViewSettings.ThumbnailWidth));
19: result.Add(String.Format("height: {0}", fm.SettingsFileList.ThumbnailsViewSettings.ThumbnailHeight));
20: result.Add(String.Format("background: url({0}) no-repeat", file.ThumbnailUrl));
21: result.Add("padding-top: 70px");
22: }
23: return String.Join(";", result.ToArray());
24: }
There is a bit more code involved to load and show the ASPxPopupControl and to create custom thumbnail images by utilizing the CustomThumbnail event.
To test this example on your own machine, you can download the demo source code here, and let me know if you have any questions about it.
Free DevExpress Products - Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We'll be happy to follow-up.