This tutorial will help you integrate Flexmonster with the Blazor framework.
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:
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.
Our sample Blazor project contains several examples:
Report, Toolbar, Width, and Height initialization parameters. See the full list of the FlexmonsterComponent’s initialization parameters.You can try all of these examples on the project’s starting page.
Follow these steps to integrate Flexmonster into a new Blazor project.
In this tutorial, we use Visual Studio 2019 as an IDE. If you do not have Visual Studio installed, download it here.
Skip this step if you already have a Blazor project. Otherwise, create one by following the instructions below:
Note that the created application will run using the HTTP protocol.
Flexmonster.Blazor can be installed with NuGet – Visual Studio’s package manager:
Flexmonster.Blazor package and install it:
Another way to install Flexmonster.Blazor is by running the following command in the console:
dotnet add package Flexmonster.Blazor
_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
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>
Create a new Razor component for Flexmonster (e.g., Pivot.razor):
Pages/ folder and select Add > Razor Component in the context menu:
As a result, a Pivot.razor component will be added to the Pages/ folder.
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.
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.
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:
@code section of the component, define the following variable to contain a report:@code {
string report = "https://cdn.flexmonster.com/reports/report.json";
}
<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";
}
You can run the Blazor project either using Visual Studio or the console.
Run the project in Visual Studio by clicking the IIS Express button on the toolbar:
The application will be automatically opened in your browser.
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 are equivalent to Flexmonster’s parameters, but with certain differences:
FlexmonsterComponent does not support the following parameters:customizeAPIRequestcustomizeCellcustomizeChartElementcustomizeContextMenuFlexmonsterComponent has the JavaScriptHandler parameter, which is not available in the new Flexmonster() API call.JavaScriptHandler, you can use JavaScript to access Flexmonster features that are not supported in Blazor out of the box (e.g., Toolbar customization).In this section, you will learn how to use Flexmonster’s methods and events in a Blazor application.
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.
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.
Most of Flexmonster’s methods work in Blazor just like in plain JavaScript. However, the following methods have certain usage specifics:
callbackHandler property is available only for CSV and HTML exports.Note If needed, the methods listed above can be used through JavaScript.
You can subscribe to events:
For details on unsubscribing from events, see this section.
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:
On at the beginning.Consider these differences when subscribing to events via component parameters. For example, specify OnReportComplete instead of reportcomplete.
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:
On at the beginning.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.
You can unsubscribe from an event using the -= operator:
@code {
//other code
private void UnsubscribeFromEvent() {
flexmonster.OnReportCompleteEvent -= ReportCompleteHandler;
}
}
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.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;
}
}
Note If needed, the events listed above can be used 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.