Configuring igZoombar

Topic Overview

Purpose

This topic explains, with code examples, how to configure the zoom action and the zoom window of the igZoombar™ control.

Required background

The following topics are prerequisites to understanding this topic:

• igZoombar Overview: This topic provides conceptual information about the igZoombar control and the functionalities it provides including the supported user interactions and some configuration basics.

• Adding igZoombar: This topic explains, with code examples, how to add the igZoombar control to an HTML page and an ASP.NET MVC application.

In this topic

This topic contains the following sections:

• igZoombar Default Configuration
  • igZoombar default configuration summary
  • igZoombar default configuration summary chart
• Configuring the Initial Zoom-Range Window Size and Position
  • Overview
  • Property settings
  • Example
• Configuring the Minimum Zoom-Range Window Size
  • Overview
  • Property settings
  • Example
• Configuring the Refresh Mode
  • Overview
  • Property settings
  • Example
• Related Content
  • Topics
  • Samples

igZoombar Default Configuration

igZoombar default configuration summary

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.

igZoombar default configuration summary chart

The following table lists the igZoombar properties and their settings that form the default configuration of the control.

igZoombar Configuration Summary

igZoombar configuration summary chart

The following table lists the configurable aspects of igZoombar. Further details on most of them are available after the table.

Configuring the Initial Zoom-Range Window Size and Position

Overview

By default, the zoom-range window is positioned at 35 percent of the total width of the igZoombar control counted from its starting (left) edge, and its breadth is set to 30 percent of the total width of control. This effectively places the zoom-range window in the center of the available scrollable range.

You can change the breadth of the window and position anywhere within the range.

Property settings

The following table maps the desired configuration to property settings. All properties as set as a percentage of the total width of the control, counted from its starting (left) edge.

Example

The code below demonstrates setting the zoom-range window to the utmost-right position on the range upon the initialization of the igZoombar control as a result of the following settings:

In JavaScript:

$("#zoom").igZoombar({ 
    defaultZoomWindow: {
            left: 70,
            width: 30
      }
});

Configuring the Minimum Zoom-Range Window Size

Overview

The minimum breadth of the zoom-range window is a size limit under which users cannot shrink (zoom in) the window any further. This limit prevents conflicts in case the range-based control with which igZoombar is integrated has lower zooming threshold than igZoombar. Setting the minimum breadth of the zoom-range window constrains the user from crossing that threshold.

This minimum breadth of the zoom-range window is configurable. By default, it is set to 5 percent of the total breadth of the igZoombar control.

Property settings

The following table maps the desired configuration to the property settings that manage it.

Example

The code below demonstrates setting the minimum breadth of the zoom-range window width to 10 percent of the total width of the igZoombar control, counted from its starting (left) edge:

In JavaScript:

$("#zoom").igZoombar({ 
      zoomWindowMinWidth: 10
});

Configuring the Refresh Mode

Overview

The Refresh mode controls the refresh action of the component to which igZoombar is attached. 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:

• Immediate (default) – the zoom effect is applied without any delay as the user interacts with the igZoombar control
• Deferred – the zoom effect is delayed until the user finishes their interaction. You may need to configure igZoombar to this mode when the control operates in a data-intensive environment and the immediate refresh might operate with unacceptable latency or stall the application.

The Refresh mode is configured with the zoomAction property.

Property settings

The following table maps the desired configuration to property settings.

Example

The code below demonstrates configuring the Refresh mode of the igZoombar control to Deferred:

In JavaScript:

$("#zoom").igZoombar({ 
      zoomAction: "deferred"
});

Related Content

Topics

The following topics provide additional information related to this topic.

• Accessibility Compliance (igZoombar): This topic explains the accessibility features of the igZoombar control and provides information on how to achieve accessibility compliance for pages containing this 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.

Samples

The following samples provide additional information related to this topic.

• Basic Zoombar: This sample demonstrates integrating igZoombar in an igDataChart control showing financial data.