This tutorial will help you integrate Flexmonster with the Blazor framework. Watch the tutorial in the video format: Blazor pivot table guide.
To test Flexmonster in a ready-to-use Blazor application, use our sample project.
Skip this step if you already have a Blazor project. Otherwise, create one by following the steps below:
Step 1.1. Create a new project in Visual Studio:
Step 1.2. In the project templates menu, select the Blazor WebAssembly App template:
Step 1.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:
Note The created application will run using the HTTP protocol.
You can install the Flexmonster.Blazor package using either the NuGet Package Manager or the console:
Step 2.1. Right-click the project's name and select Manage NuGet Packages:
Step 2.2. In the Browse tab, search for the Flexmonster.Blazor package and install it:
Install Flexmonster.Blazor 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):
Step 5.1. Click on the Pages/ folder and select Add > Razor Component in the context menu:
Step 5.2. Select Razor Сomponent and click Add:
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. Replace this app with the newly created Pivot.razor component:
Step 6.1. Open the Pages/Index.razor file and remove the @page "/" line of code.
Step 6.2. 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"
/>
Toolbar, Width, and Height are the FlexmonsterComponent's parameters. Learn more about the FlexmonsterComponent.
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:
Step 8.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";
}
Step 8.2. Add this report to Flexmonster:
<FlexmonsterComponent Report="@report"
Toolbar="true"
Width="100%"
Height="600"
/>
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"
/>
@code {
string report = "https://cdn.flexmonster.com/reports/report.json";
}
You can run the Blazor project using either 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 the browser.
To run the project from the console, enter the following command:
dotnet run
Open your project in the browser to see the result.
You can also watch our video tutorial that covers the integration process: