ejOverview

11 Jul 20181 minute to read

Overview control allows you to see a preview or an overall view of the entire content of a Diagram. This helps you to look at the overall picture of a large Diagram and also to navigate, pan, or zoom, on a particular position of the page.

Syntax

$(element).ejOverview()

Example

HTML

<div id="overview"></div>
<script>
//Create overview
$("#overview").ejOverview();
</script>

Requires

• module:jQuery.js
• module:ej.common.all
• module:ej.widgets.all
• module:jquery.easing.js
• module:jquery.globalize.js
• module:jsrender.js
• module:jquery.validate.js
• module:jquery.validate.unobtrusive.js

Members

sourceID string

The sourceId property of overview should be set with the corresponding Diagram ID for you need the overall view.

Default Value

• null

Example

HTML

<div id="overview"></div>
<script>
$("#overview").ejOverview({ sourceID: "diagram" });
</script>

height number

Defines the height of the overview

Default Value

• 400

Example

HTML

<div id="overview"></div>
<script>
$("#overview").ejOverview( { height:300 } );
</script>

width number

Defines the width of the overview

Default Value

• 250

Example

HTML

<div id="overview"></div>
<script>
$("#overview").ejOverview({width:300});
</script>