WebThumbnailViewer Client Object
The LEADTOOLS WebThumbnailViewer control includes a client-side Javascript class to update the server control without posting the entire page back to the server. Most of the WebThumbnailViewer server properties can be accessed through the Javascript class. You can access the LEADTOOLS WebThumbnailViewer control on the client-side by using the ASP.NET generated ClientID on the WebForm.
Client Naming
The client-side version of the control uses the same naming convention as the server control version for easier coding. All Leadtools public class definitions in WebThumbnailViewer.js and Utilities.js contains the prefix "ltwf" to avoid conflicts with any other components on the page.
Client Public Methods/Properties
All server side object properties can be accessed on the client by using two methods: "GetServerPropertyName", and "SetServerPropertyName", where "ServerPropertyName" is replaced with the name of the property to be accessed or set.
The following table lists the Server properties and the mapped client methods:
| Property\Method Name(Server) | Method Name(Client) | Description | Input Type |
|---|---|---|---|
| N/A | ID | Gets the web control identifier generated by ASP.NET. | - |
| BackColor |
getBackColor():string setBackColor(value:String) |
Gets or sets the background color of the control. |
String representing the CSS background color. |
| BorderColor |
getBorderColor():string setBorderColor(value:String) |
Gets or sets the border color of the control. |
String representing the CSS border color. |
| BorderStyle |
getBorderStyle():string setBorderStyle(value:String) |
Gets or sets the border style of the control. |
String representing the CSS border style. |
| BorderWidth |
getBorderWidth():int setBorderWidth(value:Int) |
Gets or sets the border width of the web control. |
Int representing the border width of the web control. |
| Columns |
getColumns():int setColumns(value:Int) |
Gets or sets the number of columns of thumbnails there will be. |
Int representing the number of columns of thumbnails. |
| Count |
getCount():int |
Gets the number of thumbnails in the viewer. |
- |
| Width |
getWidth():int setWidth(value:Int) |
Gets or sets the width of the web control in pixels. |
Int representing the width of the web control. |
| Height |
getHeight():int setHeight(value:Int) |
Gets or sets the height of the web control in pixels. |
Int representing the height of the web control. |
| WebThumbnailViewer.HorizontalAlignMode |
getHorizontalAlignMode():ImageViewerAlignMode setHorizontalAlignMode(value:ImageViewerAlignMode) |
Gets or sets the horizontal alignment used when displaying the image. |
ImageViewerAlignMode representing the horizontal alignment used when displaying the image. (0-2), 0:Near, 1:Center, 2:Far |
| WebThumbnailViewer.LayoutDirection |
getLayoutDirection():Leadtools.Web.Controls.LayoutDirection setLayoutDirection(value:Leadtools.Web.Controls.LayoutDirection) |
Gets or sets the orientation of the thumbnail viewer. |
Leadtools.Web.Controls.LayoutDirection representing the orientation of the thumbnail viewer. (0-1), 0:Horizontal, 1:Vertical |
| WebThumbnailViewer.ResourcesPath |
getResourcesPath():String |
Gets the virtual path to where resources(icons, scripts) are located. |
- |
| WebThumbnailViewer.Rows |
getRows():int setRows(value:Int) |
Gets or sets the number of rows of thumbnails there will be. |
Int representing the number of rows of thumbnails there will be. |
| WebThumbnailViewer.SelectedIndex |
getSelectedIndex():int setSelectedIndex(value:Int) |
Gets or sets the 0-based index of the selected thumbnail. |
Int representing the 0-based index of the selected thumbnail. |
| WebThumbnailViewer.SelectedThumbStyle |
getSelectedThumbStyle():ThumbnailStyle |
Gets the style of the selected thumbnail. |
- |
| WebThumbnailViewer.GetThumbnailInfo |
getThumbnailInfo():ltwfThumbnailInfo |
Gets information about a specific thumbnail element. |
- |
| WebThumbnailViewer.ThumbPadding |
getThumbPadding():int setThumbPadding(value:Int) |
Gets or sets the number of pixels padded around each thumbnail. |
Int representing the number of pixels padded around each thumbnail. |
| WebThumbnailViewer.ThumbsDirection |
getThumbsDirection():Leadtools.Web.Controls.ThumbnailsDirection setThumbsDirection(value:Leadtools.Web.Controls.ThumbnailsDirection) |
Gets or sets the flow of the thumbnails.images. |
ThumbnailsDirection represents the flow of the thumbnails.images. (0-1), 0:LeftToRight, 1:TopToBottom |
|
getThumbSize():ltwfSize setThumbSize(value:ltwfSize) |
Gets or sets the size (width/height) in pixels of the thumbnail. |
ltwfSize representing the size (width/height) in pixels of the thumbnail. |
|
| WebThumbnailViewer.ThumbSpacing |
getThumbSpacing():int setThumbSpacing(value:Int) |
Gets or sets the number of pixels between each two adjacent thumbnails. |
Int representing the number of pixels between each two adjacent thumbnails. |
| WebThumbnailViewer.ThumbStyle |
getThumbStyle():ThumbnailStyle |
Gets the style of the unselected thumbnail. |
- |
| Tooltip |
getTooltip():string setTooltip(value:String) |
Gets the text displayed when the mouse hovers over the web control. |
String representing the text displayed when the mouse hovers over the web control. |
|
getVerticalAlignMode():ImageViewerAlignMode setVerticalAlignMode(value:ImageViewerAlignMode) |
Gets or sets the vertical alignment to display the image. |
ImageViewerAlignMode (0-2), 0:Near, 1:Center, 2:Far. |
|
|
getViewerID():string |
Gets the ID of the WebImageViewer used to display the selected thumbnail. |
- |
|
| Visible |
getVisible():bool setVisible(value:Boolean) |
Gets or sets whether show/hide the control on the web page. |
String representing whether to show\hide the control. True to show the control; false to hide it. |
| N/A | Update(viewer: WebImageViewer); | Updates the current selected thumbnail element's image by the image of the passed WebImageViewer control. |
viewer: The client javascript representation of the WebImageViewer control. |
Client Public Events
All public client-side Leadtools events can be overridden with your own function. The following example displays a Javascript alert whenever the SelectedIndex property is changed on the WebThumbnailViewer client object.
WebThumbnailViewer1.SelectedIndexChanged = mySelectedIndexChanged;
function mySelectedIndexChanged()
{
alert("SelectedIndex Changed!");
}
The following table lists the client-side events that can be overridden:
| Event Name(Server) | Event Name(Client) | Raised when |
|---|---|---|
|
N/A |
BackColorChanged |
BackColor property is changed. |
|
N/A |
BorderColorChanged |
BorderColor property is changed. |
|
N/A |
BorderStyleChanged |
BorderStyle property is changed. |
|
N/A |
BorderWidthChanged |
BorderWidth property is changed. |
|
ColumnsChanged |
Columns property is changed. |
|
|
HorizontalAlignModeChanged |
HorizontalAlignMode property is changed. |
|
|
LayoutDirectionChanged |
LayoutDirection property is changed. |
|
|
RowsChanged |
Rows property is changed. |
|
|
SelectedIndexChanged |
SelectedIndex property is changed. |
|
|
SelectedThumbStyleChanged |
SelectedThumbStyle property is changed. |
|
|
ThumbPaddingChanged |
ThumbPadding property is changed. |
|
|
ThumbsDirectionChanged |
ThumbsDirection property is changed. |
|
|
ThumbSizeChanged |
ThumbSize property is changed. |
|
|
ThumbSpacingChanged |
ThumbSpacing property is changed. |
|
|
ThumbStyleChanged |
ThumbStyle property is changed. |
|
|
VerticalAlignModeChanged |
VerticalAlignMode property is changed. |
|
|
VerticalAlignModeChanged |
VerticalAlignMode property is changed. |
|
|
N/A |
VisibleChanged |
Visible property is changed. |