Get Free Trial
  1. API reference
  2. Welcome
    1. Getting started
    2. Get Flexmonster
    3. Quick start
    4. System requirements
    5. Troubleshooting
    6. Managing license keys
    7. Migrating from WebDataRocks to Flexmonster
  3. Integration with frameworks
    1. Available tutorials
    2. Integration with Angular
    3. Integration with React
    4. Integration with Vue
    5. Other integrations
      1. Integration with Python
        1. Integration with Django
        2. Integration with Jupyter Notebook
      2. Integration with React Native
      3. Integration with Blazor
      4. Integration with AngularJS (v1.x)
      5. Integration with TypeScript
      6. Integration with R Shiny
      7. Integration with jQuery
      8. Integration with Ionic
      9. Integration with Electron.js
      10. Integration with Webpack
      11. Integration with RequireJS
  4. Connecting to Data Source
    1. Supported data sources
    2. JSON
      1. Connecting to JSON
      2. Connecting to JSON using Flexmonster Data Server
      3. Data types in JSON
    3. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Data types in CSV
    4. Database
      1. Connecting to SQL databases
      2. Connecting to a MySQL database
      3. Connecting to a Microsoft SQL Server database
      4. Connecting to a PostgreSQL database
      5. Connecting to an Oracle database
    5. Flexmonster Data Server
      1. Introduction to Flexmonster Data Server
      2. Getting started with Flexmonster Data Server
      3. Flexmonster Admin Panel Guide
      4. Data sources guide
      5. Security and authorization guide
      6. The Data Server as a DLL
        1. Getting started with the Data Server as a DLL
        2. Referencing the Data Server as a DLL
        3. Implementing the API controller
        4. Implementing the server filter
        5. Implementing the custom parser
        6. DLL configurations reference
        7. The controller's methods for request handling
      7. The Data Server as a console application
        1. Installing the Data Server as a console application
        2. Configurations reference
        3. Data sources guide
        4. Security and authorization guide
      8. Troubleshooting the Data Server
    6. MongoDB
      1. Introduction to Flexmonster MongoDB Connector
      2. Getting started with the MongoDB Connector
      3. Embedding the MongoDB Connector into the server
      4. Configuring the MongoDB Connector
    7. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Flexmonster Accelerator
      3. Referencing the Accelerator as a DLL
      4. Configuring the authentication process
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    8. Custom data source API
      1. Introduction to the custom data source API
      2. A quick overview of a sample Node.js server
      3. A quick overview of a sample .NET Core server
      4. Implement your own server
        1. Implementing the custom data source API server
        2. Implementing filters
        3. Supporting more aggregation functions
        4. Supporting multilevel hierarchies
        5. Returning data for the drill-through view
        6. Testing your custom data source API server
    9. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
    10. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with the Accelerator
      3. Configuring Mondrian roles
      4. Configuring username/password protection
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    11. Connecting to other data sources
  5. Accessibility
    1. Accessibility overview
    2. Keyboard navigation
  6. Configuring the component
    1. Available tutorials
    2. Getting started with the report
    3. Configure the data source
      1. Data source
      2. Mapping
    4. Define which data to show
      1. Slice
      2. Custom sorting
      3. Calculated values
    5. Manage Flexmonster’s functionality
      1. Options
      2. Configuring global options
    6. Format fields
      1. Number formatting
      2. Date and time formatting
      3. Conditional formatting
    7. Capture the report
      1. Get the report from the component
      2. Set the report for the component
      3. Share the report
      4. Export and print
  7. Charts
    1. Available tutorials
    2. Flexmonster Pivot Charts
    3. Integration with Highcharts
    4. Integration with amCharts
    5. Integration with Google Charts
    6. Integration with FusionCharts
    7. Integration with any charting library
  8. Customizing
    1. Available tutorials
    2. Customizing the Toolbar
    3. Customizing appearance
    4. Customizing the context menu
    5. Customizing the grid
    6. Customizing the pivot charts
    7. Localizing the component
  9. Security
    1. Security in Flexmonster
    2. Security aspects of connecting to an OLAP cube
      1. Ways of connecting to an OLAP cube
      2. The data transfer process
      3. Data security
      4. Data access management
  10. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.8 to 2.9
    4. Migration guide from 2.7 to 2.8
    5. Migration guide from 2.6 to 2.7
    6. Migration guide from 2.5 to 2.6
    7. Migration guide from 2.4 to 2.5
    8. Migration guide from 2.3 to 2.4
    9. Migration guide from 2.2 to 2.3
  11. Flexmonster CLI Reference
    1. Overview
    2. Troubleshooting the CLI
    3. flexmonster create
    4. flexmonster add
    5. flexmonster update
    6. flexmonster version
    7. flexmonster help
  12. 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.

Now, choose one of the following options:

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

Run a sample Blazor project from GitHub

Step 1. Download the .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.

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. Now 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 – the 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

Now let’s 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 from it.

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

@page  "/"

<h3>Pivot</h3>

@code {
}

Now Pivot.razor will 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. Now add this report to Flexmonster:
    <FlexmonsterComponent Report="@report"
    Toolbar="true"
    Width="100%"
    Height="600">
    </FlexmonsterComponent>

Now Flexmonster will 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.

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;
}

Now we can 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 void ShowMyChart() {
        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 Cell Data Objects. If only one cell is selected, the array will contain one element.

Besides, the following API calls are not available in Blazor:

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 void ReportCompleteHandler() {
        // do something
    }

}

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

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 void ReportCompleteHandler() {
        // do something
    }

}

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

  • 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 Cell Data Object or Chart Data Object, 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 Cell Data Object or Chart Data Object. It can be done as follows:
    private void 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:

FlexmonsterComponent’s parameters

FlexmonsterComponent’s parameters are equivalent to Flexmonster’s properties. The only difference is that the following properties are not supported:

  • customizeAPIRequest
  • customizeCell
  • customizeChartElement
  • customizeContextMenu

What’s next?

You may be interested in the following articles: