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:

Loop through the Items collection and check the IsSelected property of each item
Use the ImageViewerItems.GetSelected method that will return an array of the currently selected items.

Item selection state changes in many ways:

The IsSelected value of an item inside this viewer is changed programmatically.
If a selected item was removed from the viewer.
The ImageViewerItems.Select method is called.
The ImageViewerSelectItemsInteractiveMode is set in the viewer and is working.

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; 
});