activeItem Property

Summary

Active item of this image viewer.

Syntax

JavaScript Syntax

Object.defineProperty(ImageViewer.prototype, 'activeItem', 
	get: function(), 
	set: function(value) 
)

TypeScript Syntax

activeItem: ImageViewerItem;

Property Value

The active item of this image viewer. This value cannot be null.

Remarks

For more information, refer to Image Viewer Items.

Example

This example will use the viewer as a single-selection enabled list of images and shows how to track the current active item.

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

JavaScript Example

// Clear all the images already the viewer 
this._imageViewer.items.clear(); 
// Use vertical view layout 
this._imageViewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
// Make sure the item size is larger than the image size (thumbnails mode) 
this._imageViewer.itemSize = lt.LeadSizeD.create(200, 200); 
this._imageViewer.imageBorderThickness = 1; 
// Change the active item background color 
this._imageViewer.activeItemBackgroundColor = "lightblue"; 
this._imageViewer.selectedItemBackgroundColor = "lightblue"; 
 
// Add 4 items to the viewer 
for (var page = 1; page <= 4; page++) { 
   var item = new lt.Controls.ImageViewerItem(); 
   var imageUrl = "http://demo.leadtools.com/images/png/ocr" + page.toString() + ".png"; 
   item.url = imageUrl; 
   this._imageViewer.items.add(item); 
} 
 
// Add the interface mode to select items (single) 
var selectItemsMode = new lt.Controls.ImageViewerSelectItemsInteractiveMode(); 
selectItemsMode.selectionMode = lt.Controls.ImageViewerSelectionMode.single; 
// Tell the mode to set the active item for us 
selectItemsMode.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSetActive; 
this._imageViewer.defaultInteractiveMode = selectItemsMode; 
 
// Hook to the ActiveItemChanged event and update the label 
this._imageViewer.activeItemChanged.add(function(sender, e) { 
   var index = this.items.indexOf(this.activeItem); 
   infoLabel.textContent = "ActiveIndex index is " + index.toString(); 
});

Requirements

Target Platforms

Reference

ImageViewer Class

ImageViewer Members

Leadtools.Controls Namespace

Help Version 19.0.2017.10.27

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies