Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

FileExplorer / Show image thumbnails in RadListView

  •  Products
  •  Customers
Thumbnail Preview
Image
10.jpg
Image
11.jpg
Image
18.jpg
Image
19.jpg
Image
25.jpg
Image
26.jpg
Max file size allowed:
200.00 KB
File extensions allowed:
*.*


  • The example demonstrates how to show image thumbnails using RadFileExpler and RadListView controls. Several RadControls are used in order to implement such functionality:
    • RadListView is used in order to show the thumbnails.
    • RadListView is wrapped in a RadXmlHttpPanel. This improves the overall performance of loading the folder's content (the images in the example) compared to the slow AJAX requests used to load the content of the Grid embedded in RadFileExplorer.
    • Custom paging is implemented using RadSlider control.
    • A RadContextMenu is used as a context menu for RadListView
    • The file I/O operations and permission checks are performed using the existing content provider model. This allows easily porting the demo to use a custom FileBrowserContentProvider. Only the code which initialize the content provider should be changed (ContentProvider property in the demo)

    For the time being the implementation works with images only. Also, some of the standard RadFileExplorer's commands do not exist (only "Delete" and "Upload" operations are allowed from/to RadListView used in the demo).

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.FileExplorer.ListViewIntegration.DefaultCS" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <link href="CSS/Styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post" class="qsfDark">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/FileExplorer/Examples/ApplicationScenarios/ListViewIntegration/Scripts/IntegrationScripts.js" />
            </Scripts>
        </asp:ScriptManager>
        <div>
            <div class="fePosition">
                <%--VisibleControls="AddressBox, ContextMenus, Toolbar, TreeView"--%>
                <telerik:RadFileExplorer runat="server" ID="RadFileExplorer1" Width="500px" Height="340px"
                    Skin="Black" EnableOpenFile="true" OnClientFolderChange="OnClientFolderChange"
                    OnClientLoad="OnFileExplorerLoad">
                    <Configuration ViewPaths="~/FileExplorer/ExplorerSource/Images/Products, ~/FileExplorer/ExplorerSource/Images/Customers"
                        DeletePaths="~/FileExplorer/ExplorerSource/Images/Products" UploadPaths="~/FileExplorer/ExplorerSource/Images/Customers" />
                </telerik:RadFileExplorer>
            </div>
            <div class="lvPosition">
                <asp:Panel ID="ListViewHolder" runat="server" CssClass="listViewContainer">
                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server">
                    </telerik:RadAjaxLoadingPanel>
                    <telerik:RadXmlHttpPanel ID="RadXmlHttpPanel1" runat="server" OnServiceRequest="RadXmlHttpPanel1_ServiceRequest"
                        RenderMode="Block" EnableClientScriptEvaluation="true" LoadingPanelID="RadAjaxLoadingPanel"
                        OnClientResponseEnded="OnClientResponseEnded">
                        <telerik:RadContextMenu ID="RadListViewContextMenu" runat="server" OnClientItemClicked="RadListViewMenuItemClicked">
                        </telerik:RadContextMenu>
                        <telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="ItemPlaceHolder1"
                            GroupItemCount="6" GroupPlaceholderID="GroupePlaceHolder1" AllowPaging="true"
                            AllowCustomPaging="true" PageSize="6" OnItemDataBound="RadListView1_ItemDataBound">
                            <LayoutTemplate>
                                <asp:PlaceHolder ID="GroupePlaceHolder1" runat="server"></asp:PlaceHolder>
                            </LayoutTemplate>
                            <GroupTemplate>
                                <fieldset class="grTemplate" id="sdf">
                                    <legend title="title">Thumbnail Preview</legend>
                                    <asp:PlaceHolder ID="ItemPlaceHolder1" runat="server"></asp:PlaceHolder>
                                </fieldset>
                            </GroupTemplate>
                            <ItemTemplate>
    <asp:Panel ID="itemTemplateHolder" runat="server" CssClass="lvItemTemplate" ondblclick="openImageForPreview(this);"
    onclick="imageSelected(this);">
                                    <div>
                                        <asp:Image ID="Image1" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Path") %>'
                                            AlternateText="Image" CssClass="imageStyle" />
                                        <input type="hidden" value="<%# GetFileItemProperties(Container.DataItem) %>" />
                                    </div>
                                    <div>
                                        <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>'></asp:Label>
                                    </div>
                                </asp:Panel>
                            </ItemTemplate>
                        </telerik:RadListView>
                        <telerik:RadSlider ID="RadSlider1" runat="server" Style="margin: auto;" MinimumValue="0"
                            CssClass="slide" OnClientValueChanged="OnClientValueChanged">
                        </telerik:RadSlider>
                    </telerik:RadXmlHttpPanel>
                </asp:Panel>
            </div>
        </div>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">

                function loadListViewContent(pathToFolder, sliderIndex)
                {
                    var pageIndexChangeArg = pathToFolder + "$|$" + sliderIndex;
                    var oXmlPanel = $find("<%= RadXmlHttpPanel1.ClientID %>");
                    selectedListViewItems = []; // Clear selection
                    oXmlPanel.set_value(pageIndexChangeArg);
                }

                function getRadFileExplorer1()
                {// returns RadFileExplorer1 client-side object
                    var oExplorer = $find("<%= RadFileExplorer1.ClientID %>");
                    return oExplorer;
                }
               
            </script>
        </telerik:RadCodeBlock>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451