</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <div id="ProjectTitle">FileExplorer for ASP.NET Web Forms</div> <div id="PageTitle"><div id="PageTitleText">Display Modes</div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel">Collapse All</label> <label id="ExpandAllLabel" style="display: none;">Expand All</label> </span> </div> <div class="BreadcrumbsContainer"><table><tr><td> Explore Features > Display Modes</td></tr></table></div> <div id="BodyContent"> <p>You can change the display mode for the FileExplorer control, as well as the file grid that is displayed in the right pane.</p> <p>The FileExplorer can be displayed in two modes.</p> <ul> <li> <strong>Default</strong>: In this mode, the folder tree appears in the left pane and the file browser along with all the files and sub-folders appears in the right pane. <p><img border="0" alt="" src="images/sortName.png"></p> <p>In the Default mode, you can also change the view mode of the file browser to one of the following:</p> <ul> <li><strong>Detail</strong>: Displays the files and folders in the file browser in two columns i.e. Name of the file or folder and Size of the file or folder.</li> <li> <strong>Thumbnail</strong>: Displays the files and folders in the file browser as thumbnail images. <p><img border="0" alt="" src="images/thumbnailview.png"></p> </li> </ul> </li> <li> <strong>FileTree</strong>: In this mode, all files and folders appear in a single pane in the form of a hierarchical tree. <p><img border="0" alt="" src="images/FileTree.png"></p> </li> </ul> <p>Complete the following steps to change the display mode of the FileExplorer.</p> <h4>In Design View</h4> <ol> <li>Right click the FileExplorer and select <strong>Properties</strong>.</li> <li>In the <strong>Properties</strong> Window, set the <strong>Mode</strong> property to Default or TreeView.</li> <li>Set the <strong>ViewMode</strong> property to Detail or Thumbnail.</li> </ol> <div style="WIDTH: 100%"> <table class="hs-box"> <tbody> <tr> <td class="hs-box-icon" valign="top"><img src="images/hs-note.gif"></td> <td class="hs-box-content" valign="top">You can set the <strong>ViewMode</strong> property for the for the files and folders in the files browser, only when the <strong>Mode</strong> property is set to Default.</td> </tr> </tbody> </table> </div> <h4>In Source View</h4> <p>Set the <strong>Mode</strong> and <strong>ViewMode</strong> property in the <code><cc1:C1FileExplorer></code> tag, to change the display of the FileExplorer.</p> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <pre> <cc1:C1FileExplorer ID=<span style="COLOR: #800000">"C1FileExplorer1"</span> runat=<span style="COLOR: #800000">"server"</span> VisibleControls=<span style="COLOR: #800000">"All"</span> ViewPaths=<span style="COLOR: #800000">"Example"</span> Mode=<span style="COLOR: #800000">"Default"</span> ViewMode=<span style="COLOR: #800000">"Thumbnail"</span>> </pre> </div> <h4>In Code</h4> <p>Add the following code to the <strong>Page_Load</strong> event to change the display of the FileExplorer.</p> <p class="hs-toggler">To write code in C#</p> <div class="hs-toggler-container" style="DISPLAY: none"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <pre> C1FileExplorer1.Mode = C1.Web.Wijmo.Controls.C1FileExplorer.ExplorerMode.Default; C1FileExplorer1.ViewMode = C1.Web.Wijmo.Controls.C1FileExplorer.ViewMode.Detail; </pre> </div> </div> <p class="hs-toggler">To write code in Visual Basic</p> <div class="hs-toggler-container" style="DISPLAY: none"> <div class="FilteredContentVB" data-title="VB" data-itemid="VB"> <pre> C1FileExplorer1.Mode = C1.Web.Wijmo.Controls.C1FileExplorer.ExplorerMode.Default C1FileExplorer1.ViewMode = C1.Web.Wijmo.Controls.C1FileExplorer.ViewMode.Detail </pre> </div> </div> <p><br></p> <a name="seealsobookmark"></a> </div> <div id="FooterContent"> <p> </p><p> </p><hr style="height: 1px"><p>Copyright (c) <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved.</p> <a href="http://our.componentone.com/groups/" target="_blank">Product Support Forum</a> | <a href="http://feedback.componentone.com/forums/255768-asp-net-documentation" target="_blank">Documentation Feedback</a> </div> </body> </html>