Edit this page

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:

Property Description
AllowPaging Gets/sets a value indicating whether paging should be enabled or not.
AnimationSettings Gets the animation settings for the RadImageGallery . Inner properties determine the animations between items.
AppendDataBoundItems Gets/sets a value which indicates whether to append the newly data bound items.
Culture Gets/sets the control's culture.
CurrentItemIndex Gets/sets the current item index.
CurrentPageIndex Get/sets the current page index.
DataDescriptionField Gets/sets a value that points to a field that contains the description.
DataImageField Gets/sets a value that points to a field that contains the image.
DataKeyNames Gets or sets an array of data-field names that will be used to populate the DataKeyValues collection.
DataSource Gets or sets the object from which the data-bound control retrieves its list of data items.
DataSourceID Gets or sets the ID of the control from which the data-bound control retrieves its list of data items.
DataThumbnailField Gets/sets a value that points to a field that contains the thumbnail images.
DataTitleField Gets/sets a value that points to a field that contains the title.
DisplayAreaMode Gets or sets a value determining the appearance and way the control will work. Possible values are: Image, Thumbnails, LightBox, ToolTip
ImageAreaSettings Gets the settings for the ImageArea . Inner properties configure the look of the area where the main image will be displayed.
ImagesFolderPath Sets the path to the folder that contains the images that will be displayed.
Items Gets 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.
LoadingPanel Gets the RadAjaxLoadingPanel that will be displayed when waiting for the image.
LocalizationPath Gets or sets a value indicating where RadImageGallery will look for its .resx localization files.
PagerStyle Gets the setting for the page. Inner properties configure the position and look of the pager.
PageSize Get/sets the number of images that will be displayed.
ThumbnailsAreaSettings Gets the settings for the ThumbnailsArea . Inner properties configure the look of the area that holds the thumbnails.
LoopItems Specifies 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 Properties Description
EnableZoneScroll Gets 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.
Height Gets or sets the height of the area that holds the thumbnails.
Mode Gets or sets an enumeration determining how the ThumbnailsArea will look and function. It has three values: Thumbnails, ImageSlider, ImageSliderPreview
ScrollNextButtonText Gets or sets the text that is displayed for the ScrollNextButton .
ScrollPrevButtonText Gets or sets the text that is displayed for the ScrollPrevButton .
ShowScrollbar Gets or sets a value determining if a scrollbar will be displayed in the ThumbnailsArea .
ShowScrollButtons Gets or sets a value indicating if the buttons that scroll the ThumbnailsArea view will be visible.
ThumbnailHeight Gets or sets the height of each thumbnail.
ThumbnailsSpacing Gets or sets the padding between the items in the area.
ThumbnailWidth Gets or sets the width of each thumbnail.
Width Gets 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 Properties Description
Height Gets or sets the height of the area that contains the main image.
NavigationMode Gets 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.
NextImageButtonText Gets or sets the text that is displayed for the next button.
PrevImageButtonText Gets or sets the text that is displayed for the previous button.
ResizeMode Gets 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.
ShowDescriptionBox Gets or set a value indicating whether to show a box with a description of the image.
ShowNextPrevImageButtons Gets or sets a value determining if the Next / Prev navigation buttons will be visible.
Width Gets 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 Properties Description
AlwaysVisible Gets or set a value indicating whether the pager will be visible regardless of the number of items.
PageButtonCount Gets or sets the number of page buttons that will be rendered if GridPagerMode.NumericPages .
PagerTextFormat The string used to format the description text that appears in a pager item. Default value is "Page {0} of {1}" .
Position Gets or sets the position of the pager item. It can be set to the following values: Bottom, Top, TopAndBottom
ShowPagerText Gets 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 Properties Description
NextImagesAnimation Gets or sets the animation settings for the animation performed when navigating to the next image.Inner properties
NextImagesAnimation-Type Gets or sets the type of animation that will be performed.
NextImagesAnimation-Speed Gets or sets the period of time(in miliseconds) in which the animation will be performed.
NextImagesAnimation-Easing Gets or sets the easing type.
PrevImagesAnimation Gets or sets the animation settings for the animation performed when navigating to the next image.Inner properties
PrevImagesAnimation-Type Gets or sets the type of animation that will be performed.
PrevImagesAnimation-Speed Gets or sets the period of time(in miliseconds) in which the animation will be performed.
PrevImagesAnimation-Easing Gets or sets the easing type.
SlideshowSlideDuration Gets 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 Property Description
Title Sets the title of the item.
Description Sets the description of the item.
ImageUrl Sets the URL from where the image will be retrieved.
ThumbnailUrl Sets the URL from where the thumbnail of the item will be retrieved.
NavigateUrl Sets the URL where the browser will be redirected after.
PreventDefaultGestures Determines whether gestures are enabled for the currently viewed item.

RadImageGallery Events

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

Event Description
Command Fired when the RadImageGallery control fires a command event or when the client fireCommand method is called.
ImageRequested Fired when server-side binding is used and an image is requested.
ItemCreated Fired when a RadImageGallery item is created.
ItemDataBound Fired when a RadImageGallery item is populated.
NeedDataSource Fired when RadImageGallery needs a data source for binding.
PageIndexChanged Fired when one of the page selection elements is clicked.
PageIndexChanged Fired 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.

Method Description
Rebind() Forces the control to recreate and repopulate.

See Also