SelectedItemsChanged Event

JavaScript

add_selectedItemsChanged(function(sender, e))
selectedItemsChanged.add(function(sender, e))
remove_selectedItemsChanged(function(sender, e))
selectedItemsChanged.remove(function(sender, e))

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

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

Parameter	Type	Description
sender	'var'	The source of the event.
e	EventArgs	The event data.

Reference

ImageViewer Object
ImageViewer Members