New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Server-side Programming Overview

RadImageGallery provides a rich set of server-side properties and events that can help you configure thelook and behaviour of the control.

General RadImageGallery Properties.

Table 1 demonstrates some general properties of the RadImageGallery:

PropertyDescription
AllowPagingGets/sets a value indicating whether paging should be enabled or not.
AnimationSettingsGets the animation settings for the RadImageGallery . Inner properties determine the animations between items.
AppendDataBoundItemsGets/sets a value which indicates whether to append the newly data bound items.
CultureGets/sets the control's culture.
CurrentItemIndexGets/sets the current item index.
CurrentPageIndexGet/sets the current page index.
DataDescriptionFieldGets/sets a value that points to a field that contains the description.
DataImageFieldGets/sets a value that points to a field that contains the image.
DataKeyNamesGets or sets an array of data-field names that will be used to populate the DataKeyValues collection.
DataSourceGets or sets the object from which the data-bound control retrieves its list of data items.
DataSourceIDGets or sets the ID of the control from which the data-bound control retrieves its list of data items.
DataThumbnailFieldGets/sets a value that points to a field that contains the thumbnail images.
DataTitleFieldGets/sets a value that points to a field that contains the title.
DisplayAreaModeGets or sets a value determining the appearance and way the control will work. Possible values are: Image, Thumbnails, LightBox, ToolTip
ImageAreaSettingsGets the settings for the ImageArea . Inner properties configure the look of the area where the main image will be displayed.
ImagesFolderPathSets the path to the folder that contains the images that will be displayed.
ItemsGets the Items collection that holds the data associated with the thumbnail items and the items that will be shown in the current display area mode.
LoadingPanelGets the RadAjaxLoadingPanel that will be displayed when waiting for the image.
LocalizationPathGets or sets a value indicating where RadImageGallery will look for its .resx localization files.
PagerStyleGets the setting for the page. Inner properties configure the position and look of the pager.
PageSizeGet/sets the number of images that will be displayed.
ThumbnailsAreaSettingsGets the settings for the ThumbnailsArea . Inner properties configure the look of the area that holds the thumbnails.
LoopItemsSpecifies whether the slideshow should start over after the last item is shown.

Thumbnails Area Properties

Table 2 describes the properties you can set in order to configure the look of the thumbnails area:

RadImageGallery.ThumbnailsAreaSettings PropertiesDescription
EnableZoneScrollGets or sets a value determining if the ThumbnailsArea will be automatically scrolledwhen the mouse is close enough from the left or right side of the area.
HeightGets or sets the height of the area that holds the thumbnails.
ModeGets or sets an enumeration determining how the ThumbnailsArea will look and function. It has three values: Thumbnails, ImageSlider, ImageSliderPreview
ScrollNextButtonTextGets or sets the text that is displayed for the ScrollNextButton .
ScrollPrevButtonTextGets or sets the text that is displayed for the ScrollPrevButton .
ShowScrollbarGets or sets a value determining if a scrollbar will be displayed in the ThumbnailsArea .
ShowScrollButtonsGets or sets a value indicating if the buttons that scroll the ThumbnailsArea view will be visible.
ThumbnailHeightGets or sets the height of each thumbnail.
ThumbnailsSpacingGets or sets the padding between the items in the area.
ThumbnailWidthGets or sets the width of each thumbnail.
WidthGets or sets the width of the area that holds the thumbnails.

Image Area Properties

To configure the look and feel of the area holding the main image, you can use the properties listed in Table 3:

RadImageGallery.ImageAreaSettings PropertiesDescription
HeightGets or sets the height of the area that contains the main image.
NavigationModeGets or sets a value indicating how the navigation will be performed. It has two values: Button - The user can navigate by clicking on the left/right buttons. Zone - Clicking on the left half of the image navigates backwards and clicking on the right half navigates forwards.
NextImageButtonTextGets or sets the text that is displayed for the next button.
PrevImageButtonTextGets or sets the text that is displayed for the previous button.
ResizeModeGets or sets a value determining the way the image will be resized when placed in the ImageArea . It has two values: Fit - Will scale the image so it is entirely visible. Fill - Will scale the image to fill the entire ImageArea but will crop parts of the image.
ShowDescriptionBoxGets or set a value indicating whether to show a box with a description of the image.
ShowNextPrevImageButtonsGets or sets a value determining if the Next / Prev navigation buttons will be visible.
WidthGets or sets the width of the area that contains the main image.

PagerStyle Properties

Table 4 lists properties for configuring the styles of the Pager:

RadImageGallery.PagerStyle PropertiesDescription
AlwaysVisibleGets or set a value indicating whether the pager will be visible regardless of the number of items.
PageButtonCountGets or sets the number of page buttons that will be rendered if GridPagerMode.NumericPages .
PagerTextFormatThe string used to format the description text that appears in a pager item. Default value is "Page {0} of {1}" .
PositionGets or sets the position of the pager item. It can be set to the following values: Bottom, Top, TopAndBottom
ShowPagerTextGets or sets a value indicating whether the pager text or only the pager buttons will be displayed.

AnimationSettings Properties

One of the most important features that RadImageGallery provides is the animations performed when changingthe different images. Table 5 lists the properties that can help you configure the animation settings.

RadImageGallery.ClientSettings.AnimationSettings PropertiesDescription
NextImagesAnimationGets or sets the animation settings for the animation performed when navigating to the next image.Inner properties
NextImagesAnimation-TypeGets or sets the type of animation that will be performed.
NextImagesAnimation-SpeedGets or sets the period of time(in miliseconds) in which the animation will be performed.
NextImagesAnimation-EasingGets or sets the easing type.
PrevImagesAnimationGets or sets the animation settings for the animation performed when navigating to the next image.Inner properties
PrevImagesAnimation-TypeGets or sets the type of animation that will be performed.
PrevImagesAnimation-SpeedGets or sets the period of time(in miliseconds) in which the animation will be performed.
PrevImagesAnimation-EasingGets or sets the easing type.
SlideshowSlideDurationGets or sets a value indicating how many milliseconds the RadImageGallery control will wait until it switches to the next image when the slideshow functionality is turned on.

ImageGalleryItem Properties

The table below list the properties available for the ImageGalleryItems*.

ImageGalleryItem PropertyDescription
TitleSets the title of the item.
DescriptionSets the description of the item.
ImageUrlSets the URL from where the image will be retrieved.
ThumbnailUrlSets the URL from where the thumbnail of the item will be retrieved.
NavigateUrlSets the URL where the browser will be redirected after.
PreventDefaultGesturesDetermines whether gestures are enabled for the currently viewed item.

RadImageGallery Events

Table 6 lists common RadImageGallery events to which you can subscribe.

EventDescription
CommandFired when the RadImageGallery control fires a command event or when the client fireCommand method is called.
ImageRequestedFired when server-side binding is used and an image is requested.
ItemCreatedFired when a RadImageGallery item is created.
ItemDataBoundFired when a RadImageGallery item is populated.
NeedDataSourceFired when RadImageGallery needs a data source for binding.
PageIndexChangedFired when one of the page selection elements is clicked.
PageIndexChangedFired when the page size is changed through the advanced pager or manually in code.

RadImageGallery Methods

In Table 7 you can find the RadImageGallery server-side methods.

MethodDescription
Rebind()Forces the control to recreate and repopulate.

See Also