Position the zoom-range window
This topic provides conceptual information about the igZoombar™ control and the functionalities it including the supported user interactions and some configuration basics.
The following topics are prerequisites to understanding this topic:
igDataChart™ control including its main features, minimum requirements for using charts and user functionality.This topic contains the following sections:
The igZoombar control provides zooming functionality to range-enabled controls. The igZoombar features a horizontal scroll bar, a thumbnail of the whole range, and a resizable zoom-range window.
The igZoombar control is designed to be used as an enhancement to range-based controls like igDataChart™. The igZoombar cannot work as a standalone control.
The igZoombar control supports igDataChart control out-of the box. However, igZoombar is extensible and can be custom-integrated with other Infragistics® or third-party range-enabled controls.
The following screenshot demonstrates the igZoombar in combination with an igDataChart.
The following table summarizes the main features of the igZoombar control.
| Feature | Description |
|---|---|
| Scrollbar navigation |
Users can change scale and scroll through ranges of data using the built-in capabilities of the igZoombar scrollbar.
|
| Panning and zooming | Users can adjust the display scale by dragging the edges of the thumb pad to either make the current display cover a larger range (zoom out) or a smaller range (zoom in). |
| Multiple user interaction options | All mouse user interactions are redundantly supported through touch and most of them – through the keyboard. For details, see User Interactions and Usability. |
| Touch support |
On touch-enabled devices, users can enjoy the full igZoombar functionality. All mouse interactions are supported in touch environment.
|
| Out-of-the box integration with other controls |
The igZoombar control supports igDataChart control out-of the box.
|
| Extensibility |
The igZoombar control supports igDataChart control out-of the box. However, igZoombar is extensible and can be custom-integrated with other Infragistics
or third-party range-enabled controls.
|
| Configurable zoom-range window | The initial zoom-range window width and position, as well as its minimum size, are configurable. Related topic: |
| Refresh modes |
The user zoom action can be configured in one of the following modes: Immediate or Deferred based on whether the zoom effect is applied without any delay as the user interacts with the igZoombar control or is delayed until the user finishes their interaction.
Related topic:
|
All igZoombar functionality is available on mouse-enabled and touch-enabled devices. Keyboard navigation support only zoom-range window horizontal scrolling.
The following table lists the actions with which the user can interact with igZoombar control on all possible interfaces.
| The user can… | Using… | Details | Configurable? |
|---|---|---|---|
| Pan and zoom | The range thumbs of the zoom-range window in order to display a larger range (zoom out) or a smaller range (zoom in) in it. | Users can slide the range thumbs by either dragging with the mouse or with the drag gesture. |
You can configure the control in the following aspects which are indirectly related to this user interaction:
Related topic: |
| Position the zoom-range window | The zoom-range window itself | Users can drag the zoom-range window to the desired position. |
|
| The scrollbar thumb | Users can drag the scrollbar thumb to position the zoom-range window. |
|
|
| The thumbnail area | Clicking/tapping on the thumbnail area that represents the range sifts the zoom-range window to that position |
|
|
| The scrollbar track | Clicking the track on either side of the scrollbar thumb shifts the zoom-range window one zoom-range window size in the respective direction. |
|
|
|
The action of the navigation button on the scrollbar is duplicated by the Left and Right arrow keys on the keyboard. |
The step with which the zoom-range window shifts is configurable with the zoomWindowMoveDistance property.
|
On touch-enabled devices, users can enjoy the full igZoombar functionality. All mouse interactions are supported in touch environment.
The following table lists the configurable aspects of igZoombar. For details, refer to the Configuring topic.
| Configurable aspect | Details | Properties |
|---|---|---|
| Initial zoom-range window size and position | The initial breadth and position of the zoom-range window can be configured. | |
| Minimum zoom-range window size | The minimum breadth of the zoom-range window is a size limit under which users cannot shrink the window any further. This minimum size is configurable. | |
| Refresh upon zoom interaction |
The igZoombar control can be configured to one of the following refresh modes based on how the control responds to zoom interactions performed by the user:
|
|
| Movement step of the zoom-range window | The step, with which the zoom-range window shifts upon clicking/tapping the navigation buttons on the scrollbar or pressing the Left/Right arrow keys on the keyboard, is configurable. |
By default, the zoom-range window is positioned at the center of the igZoombar control and spans over 30 percent of its total breadth (= 100%). The zoom-range window can be sized down to 5 percent of the control’s total breadth. The default refresh mode is Immediate.
The following table lists the igZoombar properties and their settings that form the default configuration of the control.
| Property | Type | Default Value | Description |
|---|---|---|---|
| defaultZoomWindow.left | number | 35 | The starting (left) edge of the zoom-range window is placed at 35 percent of the total breadth of the igZoombar control, counted from its starting (left) edge. |
| defaultZoomWindow.width | number | 30 | The width of the zoom-range window is set to 30 percent of the total breadth of the igZoombar control. |
| zoomWindowMinWidth | number | 5 | The zoom-range window can be sized down by the user to 5 percent of the control’s total breadth. |
| zoomAction | string | “immediate” | The default refresh mode is Immediate. |
The following topics provide additional information related to this topic.
Adding igZoombar: This topic explains, with code examples, how to add the igZoombar control to an HTML page and an ASP.NET MVC application.
Configuring igZoombar: This topic explains, with code examples, how to configure the zoom action and the zoom window of the igZoombar control.
Accessibility Compliance (igZoombar): This topic explains the accessibility features of the igZoombar and provides information on how to achieve accessibility compliance for pages containing the control.
Known Issues And Limitations (igZoombar): This topic describes the known issues and limitations of the igZoombar control and the available workarounds.
jQuery and MVC API Links (igZoombar): This topic provides links to the API reference documentation about the igZoombar control and the ASP.NET MVC Helper for it.
The following samples provide additional information related to this topic.
igZoombar in an igDataChart control showing financial data.View on GitHub