This topic explains, with code examples, how to add the igZoombar
™ control to an HTML page and an ASP.NET MVC application.
The following topics are prerequisites to understanding this topic:
igZoombar
control and the functionalities it including the supported user interactions and some configuration basics.This topic contains the following sections:
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.
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. |
The following table lists the code examples included in this topic.
Adding igZoombar in JavaScript: This example demonstrates adding the igZoombar
control with default configuration and attaching it to an igDataChart
in JavaScript.
Adding igZoombar in ASP.NET MVC: This example demonstrates adding the igZoombar
control with default configuration and attaching it to an igDataChart
in ASP.NET MVC.
The following code creates an igZoombar
instance with its default configuration and connects it to an igDataChart
.
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"
});
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.
In C#:
Code
@(Html.Infragistics().DataChart(Model)
.ID("chart")
// DataChart options
.DataBind()
.Render()
)
@(Html.Infragistics().Zoombar().ID("zoombar").Target("chart").Render())
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.
The following samples provide additional information related to this topic.
igZoombar
in an igDataChart
control showing financial data.View on GitHub