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

ListView / Image Gallery

Click to view larger image
Click to view larger image
Click to view larger image
Click to view larger image
Click to view larger image
Click to view larger image
Click to view larger image
Click to view larger image

  • This example demonstrates RadListView integrated with RadSlider, RadWindow and RadRotator. The images displayed by the ListView can be resized with the Slider and depending on the number of displayed items, a pager appears. RadWindow is used to display the images in full size and RadRotator allows the user to cycle between images.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" AutoEventWireup="false" CodeFile="defaultvb.aspx.vb" Inherits="ImageGalleryVB" %>

    <%@ Import Namespace="Data" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ 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" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
        <style type="text/css">
            .myClass:hover
            {
                background-color: #a1da29 !important;
            }
            .txt
            {
                border: 0px !important;
                background: #eeeeee !important;
                color: Black !important;
                margin-left: 25%;
                margin-right: auto;
                width: 100%;
                filter: alpha(opacity=50); /* IE's opacity*/
                opacity: 0.50;
                text-align: center;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <div>
            <asp:ScriptManager runat="server" ID="ScriptManager1" />
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" MinDisplayTime="200" />
            <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All" />
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" ShowSkinChooser="false"
                XhtmlCompliant="true"></qsf:Header>
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
                <telerik:RadListView runat="server" ID="RadListView1" DataSourceID="ObjectDataSource1"
                    AllowPaging="true" PageSize="10" DataKeyNames="Id" OverrideDataSourceControlSorting="true">
                    <LayoutTemplate>
                        <div id="list">
                            <asp:Panel runat="server" ID="Panel1" Style="float: left; margin-left: 160px" Visible="<%#Container.PageCount > 1 %>">
    <asp:Button runat="server" ID="PrevButton" CommandName="Page" CommandArgument="Prev"
    Text="Prev Page" Enabled="<%#Container.CurrentPageIndex > 0 %>" />
    <asp:Button runat="server" ID="NextButton" CommandName="Page" CommandArgument="Next"
    Text="Next Page" Enabled="<%#Container.CurrentPageIndex < Container.PageCount - 1 %>" />
                            </asp:Panel>
                            <div>
                                <telerik:RadSlider runat="server" ID="RadSlider1" MaximumValue="3" MinimumValue="1"
                                    Value="2" LiveDrag="false" SmallChange="1" AutoPostBack="true" OnValueChanged="RadSlider1_ValueChanged"
                                    Width="150px" CausesValidation="false" />
                            </div>
                            <div style="clear: both;">
                            </div>
                            <fieldset runat="server" id="itemPlaceholder" />
                            <div style="clear: both;">
                            </div>
                        </div>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <fieldset style="float: left; margin: 5px 5px 5px 5px; padding: 2px 2px 2px 2px;
                            position: relative; background: #eeeeee" class="myClass" onmouseover="containerMouseover(this)"
                            onmouseout="containerMouseout(this)">
                            <telerik:RadBinaryImage Style="cursor: pointer;display:block;" runat="server" ID="RadBinaryImage1"
                                DataValue='<%#Eval("Data") %>' Height='<%#ImageHeight %>' Width="<%#ImageWidth %>"
                                ResizeMode="Fit" onclick="<%#CreateWindowScript(DirectCast(Container.DataItem, Photo)) %>"
                                AlternateText="Click to view larger image" ToolTip="Click to view larger image" />
                            <div style="margin-top: -30px; position: absolute; display: none; width: <%#ImageHeight.Value/1.5 %>px;">
                                <asp:TextBox runat="server" ID="TextBox1" Text='<%#Bind("Name") %>' CssClass="txt"
                                    OnTextChanged="TextBox1_TextChanged" AutoPostBack="true" ToolTip="Edit image name" />
                            </div>
                        </fieldset>
                    </ItemTemplate>
                </telerik:RadListView>
            </telerik:RadAjaxPanel>
            <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
    <asp:ObjectDataSource runat="server" ID="ObjectDataSource1" SelectMethod="GetData"
    TypeName="Data.DataProvider"></asp:ObjectDataSource>
            <telerik:RadWindowManager runat="server" ID="RadWindowManager1">
                <Windows>
                    <telerik:RadWindow runat="server" ID="Details" VisibleStatusbar="false" NavigateUrl="windowvb.aspx"
                        Width="635px" Height="530px" AutoSize="false" Behaviors="Close,Move" ShowContentDuringLoad="false"
                        Modal="true">
                    </telerik:RadWindow>
                </Windows>
            </telerik:RadWindowManager>
            <script type="text/javascript">
                function containerMouseover(sender)
                {
                    sender.getElementsByTagName("div")[0].style.display = "";
                }
                function containerMouseout(sender)
                {
                    sender.getElementsByTagName("div")[0].style.display = "none";
                }
            </script>
        </div>
        </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