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.
Step 1.1. Start creating a new project:
Step 1.2. In the project templates menu, select the Blazor WebAssembly App template:
Step 1.3. Enter the name of your project. In the next window, choose the project's configurations. Then click Create:
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. Right-click 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 the 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. You can configure a report in Blazor via code or follow the steps below to set the report using a URL:
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"; }
The Blazor project can be run either using Visual Studio or the console. To run the project from the console, enter the following command:
dotnet run
You can also watch our video tutorial that covers the integration process: