selectedItemsChanged Event (ImageViewer)

Summary

Occurs when any of the items inside this viewer selection state changes.

Syntax

JavaScript Syntax
Object.defineProperty(ImageViewer.prototype,'selectedItemsChanged',  
	get: function(), 
	set: function(value) 
) 
function selectedItemsChanged.add(function(sender, e)); 
function selectedItemsChanged.remove(function(sender, e)); 
TypeScript Syntax
selectedItemsChanged: void; 

Remarks

This event will occur when the value of ImageViewerItem.IsSelected of any of the items inside this image viewer changes. To get the selected items of the viewer:

Item selection state changes in many ways:

When any of this occurs, the viewer will automatically re-renders the affected items and uses the "Selected" border, background and text color properties for any selected items. Besides this rendering behavior, the viewer does have treat selected items any differently and the selection state do not behave differently programmatically than any other item. Also there is no restriction on the number of items selected, you can select none, one or many items. For more information, refer to Image Viewer Items.

Example

This example will use the viewer as a multi-selection enabled list of images and shows how to track the current selected items.

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 selected item background color 
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 (multiple) 
var selectItemsMode = new lt.Controls.ImageViewerSelectItemsInteractiveMode(); 
selectItemsMode.SelectionMode = lt.Controls.ImageViewerSelectionMode.multi; 
this._imageViewer.defaultInteractiveMode = selectItemsMode; 
 
// Hook to the SelectItemsChanged event and update the label 
this._imageViewer.selectedItemsChanged.add(function(sender, e) { 
   var str; 
   str = "Selected indices:"; 
 
   // Get the selected items 
   var items = this.items.getSelected(); 
   for (var i=0; i<items.length; i++) { 
      var item = items[i]; 
      str += this.items.indexOf(item) + " "; 
   } 
   infoLabel.textContent = str; 
}); 

Event Data
ParameterTypeDescription
sendervarThe source of the event.
Requirements

Target Platforms

Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.
Leadtools.Controls Assembly
Click or drag to resize