New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Filter files and download

  • Open
  •  
  •  
  •  
  •  
  •  
  •  
  •  images
    •  AllImages
    •  Customers
    •  Products
Table that lists the contents of the current directory
FilenameSize
Table that lists the contents of the current directory
  
  
  
  
  
  
  
  
  
  
  
  • Demo Configurator

The custom FileBrowserContentProvider implementation allows filtering certain files from the RadFileExplorer. This example demonstrates the implementation of a custom FileBrowserContentProvider, that filters the showed items (files, folders). The default behavior where the files are open in a RadWindow is changed and the files with extensions .jpg and .gif are opened for direct download.

The CustomFileBrowserProviderWithFilter class inherits the FileSystemContentProvider class and overrides its ResolveDirectory and ResolveRootDirectoryAsTree methods. We override them and use our code, designed to handle the certain file extensions or folders that contain certain word(s) in their name. The example above is configured to handle items containing "Flower" and "_sys" in their names and a "sys" file extension. The function IsFiltered() is used to determine whether a file or folder is filtered or not. This function needs to be changed in order to tweak the filtering.

When a file is opened (double click on it), the extension of that file is checked inside the OnClientFileOpen event handler and in case that it is a 'jpg' or 'gif' file the event is canceled. The file is opened for direct download and not inside a preview window. The files are stored in a folder on the server and the downloaded file is served by the content-streamer - Handler.ashx file. Please note that the EnableFileOpen property needs to be set to "true" (it is "true" by default).

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.FileExplorer.FilterAndDownloadFiles.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        function getDownloadCheckbox() {
            return $get("<%= chkbxDownoaldFile.ClientID %>");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <telerik:RadFileExplorer RenderMode="Lightweight" runat="server" ID="RadFileExplorer1" Width="595px" Height="320px"
            OnClientFileOpen="OnClientFileOpen" EnableOpenFile="true">
            <Configuration ViewPaths="~/FileExplorer/ExplorerSource/images"></Configuration>
        </telerik:RadFileExplorer>
    </div>

    <telerik:RadAjaxManager ID="theAjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="CheckBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadFileExplorer1" LoadingPanelID="theLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="theLoadingPanel" runat="server"></telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View>
                <ul class="fb-group">
                    <li>
                        <span class="checkbox">
                            <asp:CheckBox ID="chkbxDownoaldFile" runat="server" Checked="true" Text="Open images for direct download" AutoPostBack="false" />
                        </span>
                    </li>
                    <li>
                        <span class="checkbox">
                            <asp:CheckBox ID="CheckBox1" runat="server" Checked="true" Text="Use custom content provider" AutoPostBack="true" />
                        </span>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance