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:customizeAPIRequest
customizeCell
customizeChartElement
customizeContextMenu
FlexmonsterComponent
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.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.
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;
}
}
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.
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.