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

Explorer View

NameTypeDate modified:Size
 
FileType Cities Folder7/18/2023 
FileType Food Folder7/18/2023 
FileType People Folder7/18/2023 

Image Preview



Instructions

  • Expand and collapse directories by double clicking on them.
  • Single click on a directory or file to see additional information about it.

Description

This demo demonstrates how you can use RadTreeList to display the contents of a directory. This is achieved by populating an XML file with items describing a folder's structure and content. Then RadTreeList is bound to an XmlDataSource populated by this file.

Expand/Collapse on double click is done by wiring the OnItemDblClick client event and checking whether the current item represents a file or folder in order to determine whether an ExpandCollapse command should be fired.

The single click functionality is achieved by accessing the fields of the currently selected item (single selection) on the client and displaying their values in an info panel.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
  • DirectoryInfo.xml
<%@ Page Language="c#" Inherits="Telerik.TreeListExamplesCSharp.Integration.FileExplorerView.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">

            var treelist, preview, fileName, fileType, dateModified, fileSize;

            Sys.Application.add_load(function () {
                treelist = $find('<%=RadTreeList1.ClientID %>');
                preview = $get('<%=Preview.ClientID%>');
                fileName = $get('<%=FileName.ClientID%>');
                fileType = $get('<%=FileType.ClientID%>');
                dateModified = $get('<%=DateModified.ClientID%>');
                fileSize = $get('<%=FileSize.ClientID%>');
            });

        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <div class="demo-container no-bg">
            <telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList1" DataSourceID="XmlDataSource1" ParentDataKeyNames="parentName" DataKeyNames="name" AutoGenerateColumns="false" GridLines="None" ClientDataKeyNames="type, path" OnItemDataBound="RadTreeList1_ItemDataBound">
                <ClientSettings>
                    <Selecting AllowItemSelection="true"></Selecting>
                    <Scrolling AllowScroll="true" ScrollHeight="300px" UseStaticHeaders="true"></Scrolling>
                    <ClientEvents OnItemDblClick="expandFolder" OnItemSelected="itemSelected"></ClientEvents>
                </ClientSettings>
                <Columns>
                    <telerik:TreeListTemplateColumn UniqueName="FileColumn" HeaderText="Name">
                        <ItemTemplate>
                            <asp:Image ID="FileType" runat="server" AlternateText="FileType" ImageUrl='<%#(string)Eval("type")=="Folder"?"folder.png":"file.png" %>'></asp:Image>
                            <asp:Label ID="Label1" runat="server" Text='<%#Eval("name") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:TreeListTemplateColumn>
                    <telerik:TreeListBoundColumn UniqueName="Type" DataField="type" HeaderText="Type">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn UniqueName="DateModified" DataField="modified" HeaderText="Date modified:">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn UniqueName="Size" DataField="size" HeaderText="Size">
                    </telerik:TreeListBoundColumn>
                </Columns>
            </telerik:RadTreeList>
            <br />
            <asp:Panel runat="server" ID="Panel1" CssClass="InfoPane">
                <asp:Image ID="Preview" runat="server" AlternateText="Image Preview" Width="70px" Height="70px" CssClass="defaultView"></asp:Image>
                <div class="infoWrapper">
                    <asp:Label ID="FileName" runat="server" Font-Bold="true" Font-Size="Medium"></asp:Label>
                    <br />
                    <asp:Label ID="FileType" runat="server" Font-Bold="true"></asp:Label>
                    <br />
                    <asp:Label ID="DateModified" runat="server"></asp:Label>
                    <br />
                    <asp:Label ID="FileSize" runat="server"></asp:Label>
                </div>
            </asp:Panel>
        </div>
    </telerik:RadAjaxPanel>
    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="DirectoryInfo.xml"></asp:XmlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance