Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • 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"
     // Other parameters
    />
    
    @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"
     // Other parameters
    />
    
    @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:

    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"
     // Other parameters
    />
    
    @code {
      // Other code
    
      private async Task ReportCompleteHandler() {
        // Do something
      }
    }

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

    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"
     // Other parameters
    />
    
    @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:

    See also