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

Declarative and Programmatic Binding

Declarative Data Binding:

Main Image

Item 1 of 0
 
  • Arc de Triomf
  • Berlin Cathedral
  • Brandenburg Gate
  • Colosseum
  • Houses of Parliament
  • La Pedrera
  • Leeds Castle
  • London Eye
  • Fireworks at the London Eye
  • Prague
  • Reichstag building
  • Space Needle
  • Seattle
  • Temple of Isis
  • Great Sphinx of Giza
  • Torre Agbar
  • Barcelona Yacht Charter

Programmatic Data Binding (using the NeedDataSource event):

Main Image

Item 1 of 0
 
  • Barcelona Yacht Charter
  • Torre Agbar
  • Great Sphinx of Giza
  • Temple of Isis
  • Seattle
  • Space Needle
  • Reichstag building
  • Prague
  • Fireworks at the London Eye
  • London Eye
  • Leeds Castle
  • La Pedrera
  • Houses of Parliament
  • Colosseum
  • Brandenburg Gate
  • Berlin Cathedral
  • Arc de Triomf

This demo shows two ways of Declarative and Programmatic data-binding of RadImageGallery.

When using Declarative DataSource you will need to specify a DataSourceID to the data source control and the required DataImageField, which represents the images into the content area of the ImageGallery. The control also implements optional properties, which allow you to specify additional information.
  • DataThumbnailField
  • DataTitleField
  • DataDescriptionField
If you do not specify a DataThumbnailField property, the thumbnail images will be created automatically from the content area images. The same goes for DataTitleField and DataDescriptionField properties. If they are not specified the images will not have accordingly Title and Description.

The only difference between Declarative DataSource and Programmatic Data-binding is that you should specify the NeedDataSource event and assign the DataSource property of the ImageGallery instead of specifying DataSourceID.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.ImageGalleryExamples.DataBinding.ServerSide.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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 href="styles.css" rel="stylesheet" />
</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 class="left-image-gallery">
            <h3>Declarative Data Binding:</h3>
            <telerik:RadImageGallery RenderMode="Lightweight" ID="RadImageGallery1" runat="server" DataSourceID="SqlDataSource1" DataDescriptionField="Description" DataImageField="ImageUrl"
                DataTitleField="Title" Width="600px" Height="480px" LoopItems="true">
                <ThumbnailsAreaSettings ThumbnailWidth="120px" ThumbnailHeight="80px" Height="80px" />
                <ImageAreaSettings Height="400px" />
            </telerik:RadImageGallery>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ImageUrl], [Description], [Title] FROM [CityImages]"></asp:SqlDataSource>
        </div>
        <div class="right-image-gallery">
            <h3>Programmatic Data Binding (using the NeedDataSource event):</h3>
            <telerik:RadImageGallery RenderMode="Lightweight" ID="RadImageGallery2" runat="server" OnNeedDataSource="RadImageGallery2_NeedDataSource" DataDescriptionField="Description" DataImageField="ImageUrl"
                DataTitleField="Title" Width="600px" Height="480px" LoopItems="true">
                <ThumbnailsAreaSettings ThumbnailWidth="120px" ThumbnailHeight="80px" Height="80px" />
                <ImageAreaSettings Height="400px" />
            </telerik:RadImageGallery>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance