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>