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. |