TreeList - Explorer View

NameTypeDate modified:Size
 
FileType Cities Folder11/13/2014 
FileType Food Folder11/13/2014 
FileType People Folder11/13/2014 

Image Preview



Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?