Version

Adding igZoombar

Topic Overview

Purpose

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

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 including the supported user interactions and some configuration basics.

In this topic

This topic contains the following sections:

Adding igZoombar – Conceptual Overview

igZoombar summary

The igZoombar cannot work as a standalone control. It is designed to be used as an enhancement to range-enabled controls like igDataChart™. It works only in combination with other controls. The igZoombar supports igDataChart out of the box.

igZoombar summary chart

The following table gives a brief conceptual summary on how to add the igZoombar control to an HTML page and an ASP.NET MVC application. For further details, see Adding igZoombar – Code Examples.

To enable igZoombar in… Do this…
JavaScript Create and instance of igZoombar control and attach it to the igDataChart control using the target option.
ASP.NET MVC In the View, use the Ignite UI for MVC and call its Zoombar method which returns the ZoombarWrapper object. Attach the ZoombarWrapper object to an igDataChart control using its Target method. Finally, call the ZoombarWrapper.Render method.
Note: There is no need to define placeholders in the HTML page. They will be created automatically by the Ignite UI for MVC.

Adding igZoombar – Code Examples

Code examples summary

The following table lists the code examples included in this topic.

Code Example: Adding igZoombar in JavaScript

Description

The following code creates an igZoombar instance with its default configuration and connects it to an igDataChart.

Code

In HTML:

Code
<!--Add a placeholders to the HTML page -->
<div id="chart"></div>
<br/>
<div id="zoom"></div>
var chart = $("#chart");
$("#chart").igDataChart({
// igDataChart options
});
$("#zoombar").igZoombar({
    target: "#chart"
});

Code Example: Adding igZoombar in ASP.NET MVC

Description

The following code creates igDataChart and igZoombar instances in the View using the Ignite UI for MVC. The igZoombar control is rendered with its default configuration.

Code

In C#:

Code
@(Html.Infragistics().DataChart(Model)
.ID("chart")
// DataChart options
.DataBind()
.Render()
)
@(Html.Infragistics().Zoombar().ID("zoombar").Target("chart").Render())

Related Content

Topics

The following topics provide additional information related to this topic.

  • 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 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.

View on GitHub