LightSwitch HTML Edition
Member Of Wijmo Collection Control
Base Control wijgallery
Description Creates a viewer control for a set of images with thumbnails and animated transitions.
Usage Apply to a collection with at least two entity properties. The first property is used as the caption and the second one determines the source of the image. The image source property can either be a string (URL) or a LightSwitch Image type. Any additional properties are ignored.
Generated Code
Copy Code
myapp.ScreenName.EntityName_render = function (element, contentItem) {

    var div = $("<div style='height:600px'/>");

    contentItem.value.oncollectionchange = function () {
        var p = c1ls.getGalleryProperties(contentItem);

        if (p.image !== null) {
            var list = [];

   (r) {
                list.push("<li><img width='200' height='150' src='" + p.src(r) + "' title='" + r[p.caption] + "'/></li>");




This widget requires an absolute height value in order to render. If desired, change the default height (600px) of the generated DOM element.

This widget will not render until the screen collection to which it is bound is loaded (that is, when the oncollectionchange event fires). If the underlying query is re-executed with different sort or filter criteria, then the widget will re-render accordingly. The final line of code calls the c1ls.renderControl method to ensure proper rendering in tabs and popups, and to handle collections that have already been loaded.

The utility method c1ls.getGalleryProperties parses the child properties defined in the screen designer and returns an object with associated metadata. This object has the following properties:

For each item in the collection, the generated code constructs an <li> tag with a thumbnail image of a fixed size (200 pixels wide, 150 pixels high). After the containing <ul> list is applied to the generated DOM element, the wijgallery constructor is called without arguments to render the image viewer. If desired, you can modify the generated code to set one or more options.

See Also



Copyright (c) GrapeCity, inc. All rights reserved.

Documentation Feedback  |  Product Support Forum