ImageGallery - Declarative and Programmatic Binding

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.ImageGalleryExamples.DataBinding.ServerSide.DefaultCS" CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <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" />
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ImageUrl], [Description], [Title] FROM [CityImages]"></asp:SqlDataSource>
        <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" />

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?