Using methods and events

This guide explains how to use Flexmonster methods and events in a Blazor 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 Blazor application with Flexmonster embedded into it.
If Flexmonster is not yet embedded, see Integration with Blazor.

Create a reference to Flexmonster

To call methods and subscribe to events, we will need a reference to the Flexmonster instance. Create the reference and attach it to the FlexmonsterComponent as follows:

<FlexmonsterComponent @ref="flexmonster"
 ...
/>

@code {
  private FlexmonsterComponent flexmonster;
}

We can now reference the Flexmonster instance throughout the Blazor component.

Use methods

To call Flexmonster’s methods, use a reference to the Flexmonster instance:

<FlexmonsterComponent @ref="flexmonster"
 ...
/>

@code {
  private FlexmonsterComponent flexmonster;

  private async Task ShowMyChart() {
    await flexmonster.ShowCharts("pie");
  }
}

Notice that method names in Blazor are pascal-cased (i. e., ShowCharts instead of showCharts) to conform to C# code conventions.

Find more examples of using Flexmonster’s methods in the sample Blazor project.

Specifics of using Flexmonster’s methods in Blazor

Most of Flexmonster’s methods work in Blazor just like in plain JavaScript. However, the following methods have certain usage specifics:

exportTo — the callbackHandler parameter is available only for CSV and HTML exports.
getSelectedCell — this method always returns an array of CellDataObjects. If only one cell is selected, the array will contain one element.

Besides, some API calls are not available in Blazor natively. However, you can still use them through JavaScript if needed:

alert
clearXMLACache
customizeAPIRequest
customizeCell
customizeChartElement
customizeContextMenu
getAllHierarchiesAsync
getAllMeasuresAsync
getColumnsAsync
getData — as a result, integrating with 3rd party charting libraries is not supported in Blazor. Nevertheless, you can use our built-in Flexmonster Pivot Charts to visualize your data.
getMeasuresAsync
getMembersAsync
getReportFiltersAsync
getRowsAsync
getXMLACatalogs
getXMLACatalogsAsync
getXMLACubes
getXMLACubesAsync
getXMLADataSources
getXMLADataSourcesAsync
getXMLAProviderName
getXMLAProviderNameAsync
off — see how to unsubscribe from events in Blazor
on — see how to subscribe to events in Blazor
sortingMethod

Use events

Subscribing to events

You can subscribe to events:

When initializing Flexmonster
After the initialization

For details on unsubscribing from events, see this section.

Subscribe when initializing Flexmonster

When initializing the FlexmonsterComponent, you can subscribe to events using component parameters:

<FlexmonsterComponent OnReportComplete="@ReportCompleteHandler"
 ...
/>

@code {
  // Other code

  private async Task ReportCompleteHandler() {
    // Do something
  }
}

Notice that parameter names in Blazor are different from event names in Flexmonster:

They are pascal-cased to conform to C# code conventions.
They contain On at the beginning.

Consider these differences when subscribing to events via component parameters. For example, specify OnReportComplete instead of reportcomplete.

Subscribe after the initialization

You can subscribe to events on the fly using a reference to the FlexmonsterComponent. Attach your event handler to a Flexmonster’s event with the += operator:

<FlexmonsterComponent @ref="flexmonster"
 ...
/>

@code {
  private FlexmonsterComponent flexmonster;

  private void SubscribeToEvent() {
    flexmonster.OnReportCompleteEvent += ReportCompleteHandler;
  }

  private async Task ReportCompleteHandler() {
    // Do something
  }
}

Note We do not recommend using anonymous event handlers, since there are specifics in unsubscribing from them.

Notice that event names in Blazor are different from the ones in Flexmonster:

They are pascal-cased to conform to C# code conventions.
They contain On at the beginning.
They contain Event at the end.

Consider these differences when subscribing to events via the reference to Flexmonster. For example, specify OnReportCompleteEvent instead of reportcomplete.

For more examples of subscribing to the events, see the sample Blazor project.

Unsubscribing from events

To remove an event handler, use the -= operator:

@code {
  // Other code
  
  private void UnsubscribeFromEvent() {
    flexmonster.OnReportCompleteEvent -= ReportCompleteHandler;
  }
}

Specifics of using Flexmonster’s events in Blazor

Most of Flexmonster’s events work in Blazor just like in plain JavaScript. However, the following events have certain usage specifics:

drillthroughopen — instead of CellDataObject or ChartDataObject, a value of the object type is passed to the handler. This is because C# is a strongly typed language, so C# functions must return a value of one particular type.
In the drillthroughopen event handler, you should manually cast the object to the CellDataObject or ChartDataObject. It can be done as follows:
```
private async Task OnDrillThroughOpenHandler(object obj)
{
  if (obj is CellData)
  {
    var casted = (CellData) obj;
  }
  else
  {
    var casted = (ChartData) obj; 
  }
}
```

Besides, some events are not available in Blazor natively. However, you can still use them through JavaScript if needed: