Using methods and events

This guide explains how to use Flexmonster methods and events in a Svelte application. First, we will get a reference to the Flexmonster instance. Then we will use this reference to call methods and subscribe to events.

Prerequisites

• A Svelte application with Flexmonster embedded into it.
  If Flexmonster is not yet embedded, see Integration with Svelte.

Get a reference to the Flexmonster instance

To interact with Flexmonster through code, you need a reference to the <Flexmonster> component instance.

Declare a reference using Svelte’s bind:property directive:

<script lang="ts">
  import { Flexmonster } from "svelte-flexmonster";
  let pivot: Flexmonster.Pivot;
</script>

<div>
  <Flexmonster
    bind:pivot
    toolbar
  />
</div>

The pivot variable now holds a reference to the Flexmonster component instance.

Use methods

Call Flexmonster’s methods on the variable with the Flexmonster instance (e.g., pivot):

pivot.showCharts("pie");

Some methods can also be defined as <Flexmonster> props:

<Flexmonster
  bind:pivot
  toolbar={true}
  customizeCell={customizeCellFunction}
/>

Such methods include:

• customizeAPIRequest
• customizeCell
• customizeChartElement
• customizeContextMenu
• sortFieldsList

Find more examples of using Flexmonster’s methods in our sample Svelte project.

Check out the full list of Flexmonster’s methods.

Use events

There are two ways to subscribe to Flexmonster events:

• Via the component's props
• Via the on() method

You can also unsubscribe from an event.

Subscribing to an event via the component's props

Define an event as the component's prop and assign an event handler to it:

<Flexmonster
  bind:pivot
  toolbar={true}
  beforetoolbarcreated={customizeToolbar}
/>

The event handler (in our case, customizeToolbar) should be defined in the <script> section of the file.

The sample Svelte.js project demonstrates how to subscribe to events via the component’s props.

See the full list of Flexmonster events.

Subscribing to an event via the on() method

Use the previously created pivot variable to call the on() method:

pivot.on("reportcomplete", onReportComplete);

See how the on() method is used in the sample Svelte project.

Check out the full list of Flexmonster events.

Unsubscribing from an event

Use the previously created pivot variable to call the off() method and unsubscribe from an event:

pivot.off(eventName);

This will remove all handlers from the event. To remove a specific handler, pass its name as a second parameter to off():

pivot.off("reportcomplete", onReportComplete);

Note If a handler is specified as an anonymous function, you can remove it only by removing all handlers.

See how the off() method is used in the sample Svelte project.

See also

• Flexmonster methods
• Flexmonster events
• Usage examples
• About the <Flexmonster> component