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

Binding to Folder and Static Collection

Binding to Folder:

  • Climbing
  • Diving
  • Football
  • Hang_glider
  • Mountain_Biking
  • Skiing
  • Snowboarding
  • Surfing
  • Swimming
  • Yoga
Main Image
Item 1 of 10
 

Binding to Static Collection:

  • Yoga
  • Swimming
  • Surfing
  • Snowboarding
  • Skiing
  • Mountain_Biking
  • Hang_glider
  • Football
  • Diving
  • Climbing
Main Image
Item 1 of 10
 

This demo shows two ways for binding the RadImageGallery:

  • Binding to Folder - it is as easy as setting the RadImageGallery ImagesFolderPath property and providing it an absolute or relative location to the folder. The control will automatically generate small thumbnail images that will be cropped automatically to fit the thumbnail width and height.
    Additionally, the images in the Image Area have relative paths and the user only needs to wait for the image to be loaded by the browser.
  • Binding to Static Collection - the RadImageGallery control supports static item collection binding. The idea is to specify items and their properties in the RadImageGallery.Items collection.
  • DefaultCS.aspx
  • Styles.css
<%@ Page Language="c#"  %>

<%@ 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 rel="stylesheet" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <div>
        <div class="left-image-gallery">
            <h3>Binding to Folder:</h3>
            <telerik:RadImageGallery RenderMode="Lightweight" ID="RadImageGallery1" runat="server" ImagesFolderPath="Images"
                Width="600px" Height="480px">
                <ThumbnailsAreaSettings Position="Left" ScrollOrientation="Vertical" />
            </telerik:RadImageGallery>
        </div>
        <div class="right-image-gallery">
            <h3>Binding to Static Collection:</h3>
            <telerik:RadImageGallery RenderMode="Lightweight" runat="server" Width="600px" Height="480px">
                <ThumbnailsAreaSettings ThumbnailWidth="140px" Width="140px" Position="Left" ScrollOrientation="Vertical" />
                <Items>
                    <telerik:ImageGalleryItem ImageUrl="Images/Yoga.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Swimming.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Surfing.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Snowboarding.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Skiing.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Mountain_Biking.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Hang_glider.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Football.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Diving.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Climbing.jpg" />
                </Items>
            </telerik:RadImageGallery>
        </div>
    </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance