Need a special offer?Find out if your project fits.
+
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    Integration with Blazor

    This tutorial will help you integrate Flexmonster with the Blazor framework.

    Prerequisites

    To work with Blazor, you will need Microsoft .NET Core 3.1 or higher. Get it here if it's not already installed on your machine.

    This guide contains the following sections:

    1. Run a sample Blazor project from GitHub
    2. Integrate Flexmonster into a Blazor project
    3. See the FlexmonsterComponent’s parameters
    4. Use methods and events in Blazor
    5. Access Flexmonster functionality through JavaScript

    Run a sample Blazor project from GitHub

    Step 1. Download a .zip archive with the sample project or clone it from GitHub with the following commands:

    git clone https://github.com/flexmonster/pivot-blazor
    cd pivot-blazor

    Step 2. Run the sample project from the console:

    cd Flexmonster.Blazor.Sample
    dotnet run

    Open http://localhost:5000/ in your browser to see the result. The application can be shut down manually with Ctrl + C.

    Usage examples

    Our sample Blazor project contains several examples:

    You can try all of these examples on the project’s starting page.

    Integrate Flexmonster into a Blazor project

    Follow these steps to integrate Flexmonster into a new Blazor project.

    Step 1. Install Visual Studio

    In this tutorial, we use Visual Studio 2019 as an IDE. If you do not have Visual Studio installed, download it here.

    Step 2. Create a Blazor project

    Skip this step if you already have a Blazor project. Otherwise, create one by following the instructions below:

    1. Start creating a new project in Visual Studio:
      Start creating a new project
    2. In the project templates menu, select the Blazor WebAssembly App template:
      Select the Blazor WebAssembly App template
    3. Select a .NET version. We will use .NET 5.0, but you can choose another available version in the dropdown menu. Then click Create:
      Select a .NET version

    Note that the created application will run using the HTTP protocol.

    Step 3. Install the Flexmonster.Blazor package

    Flexmonster.Blazor can be installed with NuGet – Visual Studio’s package manager:

    1. Right-click on the project and select Manage NuGet Packages:
      Open NuGet
    2. In the Browse tab, search for the Flexmonster.Blazor package and install it:
      Install the FlexmonsterBlazor package

    Another way to install Flexmonster.Blazor is by running the following command in the console:

    dotnet add package Flexmonster.Blazor

    Step 4. Include Flexmonster.Blazor in the _Imports.razor file

    _Imports.razor is located in the project’s root directory. Add the following line of code to the end of the file:

    @using Flexmonster.Blazor

    Step 5. Add Flexmonster.Blazor to the index.html file

    Find the index.html file in the wwwroot/ folder. Then add the _content/Flexmonster.Blazor/blazor-flexmonster.js script to this file:

    <head>
      <!-- Other metadata tags -->
      <link href="css/app.css" rel="stylesheet" />
      <link href="PivotBlazor.styles.css" rel="stylesheet" />
      <script src="_content/Flexmonster.Blazor/blazor-flexmonster.js"></script>
      <!-- Other metadata tags -->
    </head> 

    Step 6. Create a new Razor component

    Create a new Razor component for Flexmonster (e.g., Pivot.razor):

    1. Click on the Pages/ folder and select Add > Razor Component in the context menu:
      Add Razor Component
    2. Select Razor Сomponent and click Add:
      Add Razor Component

    As a result, a Pivot.razor component will be added to the Pages/ folder.

    Step 7. Add Pivot.razor to the home page

    If you launch the project now, you will see a basic Hello World app on its home page. In this step, we will replace this app with the newly created Pivot.razor component.

    First, open the Pages/Index.razor file and remove the @page  "/" line of code.

    Then open the Pivot.razor file and add the same line of code. Your Pivot.razor file should look like this:

    @page  "/"

    <h3>Pivot</h3>

    @code {
    }

    Pivot.razor will now be displayed on the home page.

    Step 8. Add Flexmonster to the Razor component

    Include Flexmonster in the Pivot.razor component as follows:

    @page  "/"
     
    <h3>Pivot</h3>
    <FlexmonsterComponent Toolbar="true"
                          Width="100%"
                          Height="600">
    </FlexmonsterComponent>

    The next step is to define a report for Flexmonster.

    Step 9. Define a report for Flexmonster

    Code from the previous step embeds an empty pivot table into the page. To see some data on the grid, we should create a report:

    1. In the @code section of the component, define the following variable to contain a report:
      @code {
      string report = "https://cdn.flexmonster.com/reports/report.json";
      }
    2. Add this report to Flexmonster:
      <FlexmonsterComponent Report="@report"
      Toolbar="true"
      Width="100%"
      Height="600">
      </FlexmonsterComponent>

    Flexmonster will now visualize the report we defined in the report variable.

    After you complete the above steps, your Pivot.razor file should look similar to the following:

    @page  "/"
    
    <h3>Pivot</h3>
    <FlexmonsterComponent Report="@report"
                          Toolbar="true"
                          Width="100%"
                          Height="600">
    </FlexmonsterComponent>
    
    @code {
      string report = "https://cdn.flexmonster.com/reports/report.json";
    }

    Step 10. Run the project

    You can run the Blazor project either using Visual Studio or the console. 

    Using Visual Studio

    Run the project in Visual Studio by clicking the IIS Express button on the toolbar:

    The IIS Express button on the toolbar

    The application will be automatically opened in your browser.

    Using the console

    To run the project from the console, enter the following command:

    dotnet run

    Open http://localhost:5000/ in your browser to see the result.

    The FlexmonsterComponent’s parameters

    The FlexmonsterComponent’s parameters are equivalent to Flexmonster’s parameters, but with certain differences:

    • The FlexmonsterComponent does not support the following parameters:
      • customizeAPIRequest
      • customizeCell
      • customizeChartElement
      • customizeContextMenu
    • The FlexmonsterComponent has the JavaScriptHandler parameter, which is not available in the new Flexmonster() API call.
      With the JavaScriptHandler, you can use JavaScript to access Flexmonster features that are not supported in Blazor out of the box (e.g., Toolbar customization).
      See how to access Flexmonster functionality through JavaScript.

    Use methods and events in Blazor

    In this section, you will learn how to use Flexmonster’s methods and events in a Blazor application.

    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"
     ...
    </FlexmonsterComponent>
    
    @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"
     ...
    </FlexmonsterComponent>
    
    @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# Coding Conventions.

    Find more examples of using Flexmonster’s methods in the Blazor sample 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 property 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, the following API calls are not available in Blazor out of the box:

    Note If needed, the methods listed above can be used through JavaScript.

    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"
     ...
    </FlexmonsterComponent>
    
    @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"
     ...
    </FlexmonsterComponent>
    
    @code {
      private FlexmonsterComponent flexmonster;
    
      private void SubscribeToEvent() {
        flexmonster.OnReportCompleteEvent += ReportCompleteHandler;
      }
    
      private async Task ReportCompleteHandler() {
        // do something
      }
    }

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

    • They are pascal-cased to conform to C# Coding 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

    You can unsubscribe from an event using 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, the following events are not supported in Blazor out of the box:

    Note If needed, the events listed above can be used through JavaScript.

    Access Flexmonster functionality through JavaScript

    You can use JavaScript to access Flexmonster’s features that are not supported in Blazor out of the box (see the list of such methods and events).

    To demonstrate this approach, let’s customize the Toolbar using JavaScript:

    Step 1. Go to the wwwroot/index.html file and create an empty <script> section there:

    <body>
    	<app>Loading...</app>
    
    	<script src="_framework/blazor.webassembly.js"></script>
    	<script>
    	</script>
    </body>
    

    This section will contain your JavaScript code for Flexmonster.

    Step 2. Inside of the window object, create a JavaScript function and pass a Flexmonster instance to it. This instance can be used to access the Flexmonster API. For example:

    <body>
    	<app>Loading...</app>
     
    	<script src="_framework/blazor.webassembly.js"></script>
    	<script>
    		/* The window.customizeToolbar function subscribes
    		   Flexmonster to the beforetoolbarcreated event
    		*/
    		window.customizeToolbar = (pivot) => {
    			pivot.on("beforetoolbarcreated", customizeToolbarHandler);
    		}
     
    		function customizeToolbarHandler(toolbar) {
    			// get all tabs
    			let tabs = toolbar.getTabs();
    			toolbar.getTabs = function () {
    				// remove the Connect tab using its id
    				tabs = tabs.filter(tab => tab.id != "fm-tab-connect");
    				return tabs;
    			}
    		}
    	</script>
    </body>

    Step 3. Open the file with Flexmonster and specify your JavaScript function (e.g., customizeToolbar) in the FlexmonsterComponent’s JavaScriptHandler parameter:

    @page  "/"
    
    <h3>Pivot</h3>
    <FlexmonsterComponent Report="@report"
                          Toolbar="true"
                          Width="100%"
                          Height="600"
                          JavaScriptHandler="customizeToolbar">
    </FlexmonsterComponent>
    

    The window.customizeToolbar function will be called after the Flexmonster instance is created. As a result, your customization will be applied to Flexmonster.

    What’s next?