Gallery Methods

This section describes members used to manipulate the widget.

beginUpdate()

Prevents the component from refreshing until the endUpdate method is called.

The beginUpdate and endUpdate methods allow you to apply several modifications to the component. After the beginUpdate method is called, the component does not update the UI until the endUpdate method is called. The usage of these methods prevents excessive component updating when changing multiple component settings at once.

endUpdate()

Enables the component to refresh after the beginUpdate method call.

The beginUpdate and endUpdate methods allow you to apply several modifications to the component. After the beginUpdate method is called, the component does not update the UI until the endUpdate method is called. The usage of these methods prevents excessive component updating when changing multiple component setting at once.

goToItem(itemIndex, animation)

Shows the specified gallery item.

Parameters:
itemIndex: Number
An index of the required gallery item.
animation: Boolean
A Boolean value indicating whether or not to use animation when switching to the required item.
Return Value: jQuery.Promise
A deferred object resolved after the gallery item has changed.

Show Example:
jQuery
<div class="gallery" data-bind="dxGallery: { dataSource: galleryData }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Go to items:</div>
    <div class="dx-field-value">
      <span data-bind="dxButton: { text: '&nbsp;1&nbsp;', clickAction: goTo1Item }"></span>
      <span data-bind="dxButton: { text: '&nbsp;2&nbsp;', clickAction: goTo2Item }"></span>
      <span data-bind="dxButton: { text: '&nbsp;3&nbsp;', clickAction: goTo3Item }"></span>
      <span data-bind="dxButton: { text: '&nbsp;4&nbsp;', clickAction: goTo4Item }"></span>
    </div>
  </div>
</div>
galleryData = [
    "/Content/images/doc/13_2/PhoneJS/person1.png",
    "/Content/images/doc/13_2/PhoneJS/person2.png",
    "/Content/images/doc/13_2/PhoneJS/person3.png",
    "/Content/images/doc/13_2/PhoneJS/person4.png"
];
goTo1Item = function () { goToItem(0); };
goTo2Item = function () { goToItem(1); };
goTo3Item = function () { goToItem(2); };
goTo4Item = function () { goToItem(3); };
goToItem = function (i) {
  $(".gallery").dxGallery("instance").goToItem(i, true)
    .done(function () { DevExpress.ui.notify("Navigated to " + (i + 1) + " item", "success", 1000); })
};
targetItem = ko.observable(4);
body{
  text-align: center;
}
.gallery{
  margin: 10px;
  height: 370px;
}
.dx-field .dx-field-label{
  width:auto;
}

instance()

Returns an instance of this component class.

Return Value: Object
An instance of this component class

Use this method to access other methods of the component.

nextItem(animation)

Shows the next gallery item.

Parameters:
animation: Boolean
A Boolean value indicating whether or not to use animation when switching to the next item.
Return Value: jQuery.Promise
A deferred object resolved after the gallery item has changed.

If the current item is the last item in the gallery, the method behavior depends on the loop option value. If loop is set to true, the first item is shown. Otherwise, the method does nothing.

Show Example:
jQuery
<div class="gallery" data-bind="dxGallery: { loop: true, dataSource: galleryData }"></div><br/>
<div data-bind="dxButton: { text: 'Next item', clickAction: showNextItem }"></div>
galleryData = [
    "/Content/images/doc/13_2/PhoneJS/person1.png",
    "/Content/images/doc/13_2/PhoneJS/person2.png",
    "/Content/images/doc/13_2/PhoneJS/person3.png",
    "/Content/images/doc/13_2/PhoneJS/person4.png"
];
showNextItem = function () {
  $(".gallery").dxGallery("instance").nextItem(true)
    .done(function () { DevExpress.ui.notify("Navigated to next item", "success", 1000); })
};
body{
  text-align: center;
}
.gallery{
  margin: 10px;
  height: 370px;
}
.dx-field .dx-field-label{
  width:auto;
}

option()

Returns the configuration options of this component.

Return Value: Object
An object representing the configuration options of this component.

option(optionName)

Gets the value of the specified configuration option of this component.

Parameters:
optionName: String
The name of the option to get.
Return Value: any
The value of the specified option.

If you need to get the value of a configuration option field, specify the path to the required field.

option(optionName, optionValue)

Sets a value to the specified configuration option of this component.

Parameters:
optionName: String
The name of the required option.
optionValue: any
The value you wish to assign to the required option.

To set a value to the configuration option field, specify the path to the required field.

option(options)

Sets one or more options of this component.

Parameters:
options: Object
An object containing the required configuration options.

prevItem(animation)

Shows the previous gallery item.

Parameters:
animation: Boolean
A Boolean value indicating whether or not to use animation when switching to the previous item.
Return Value: jQuery.Promise
A deferred object resolved after the gallery item has changed.

If the current item is the first item in the gallery, the method behavior depends on the loop option value. If loop is set to true, the last item is shown. Otherwise, the method does nothing.

Show Example:
jQuery
<div class="gallery" data-bind="dxGallery: { loop: true, dataSource: galleryData }"></div><br/>
<div data-bind="dxButton: { text: 'Prev item', clickAction: showPrevItem }"></div>
galleryData = [
    "/Content/images/doc/13_2/PhoneJS/person1.png",
    "/Content/images/doc/13_2/PhoneJS/person2.png",
    "/Content/images/doc/13_2/PhoneJS/person3.png",
    "/Content/images/doc/13_2/PhoneJS/person4.png"
];
showPrevItem = function () {
  $(".gallery").dxGallery("instance").prevItem(true)
    .done(function () { DevExpress.ui.notify("Navigated to previous item", "success", 1000); })
};
body{
  text-align: center;
}
.gallery{
  margin: 10px;
  height: 370px;
}
.dx-field .dx-field-label{
  width:auto;
}

repaint()

Redraws the widget.

After performing some external modifications that lead to a change of the widget container's size or visibility, the widget's state may become invalid. In this instance, use the repaint() method to redraw the widget.