Get Free Trial

Integration with Blazor

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.

Prerequisites

Microsoft .NET Core 3.1 or later
In this tutorial, the .NET 8 framework is used.
An IDE of your choice (e.g., Visual Studio).

Step 1. Create a new Blazor project

If you don't have an existing Blazor project, create a new one with the following commands:

dotnet new blazorwasm -n flexmonster-project
cd flexmonster-project

Check out how to create a Blazor WebAssembly App project in Visual Studio.

Step 2. Install the Flexmonster.Blazor package

You can install the Flexmonster.Blazor package using the console:

dotnet add package Flexmonster.Blazor

Step 3. 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 file:

@using Flexmonster.Blazor

Step 4. 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="flexmonster-project.styles.css" rel="stylesheet" />
  <script src="_content/Flexmonster.Blazor/blazor-flexmonster.js"></script>
  <!-- Other metadata tags -->
</head>

Step 5. Create a Razor component for Flexmonster

Step 5.1. In the Pages/ folder, create a new Razor component for Flexmonster (e.g., Pivot.razor) and paste the following lines of code:

<h3>Pivot</h3>

@code {
}

Step 5.2. Include Flexmonster in the newly created Razor component:

<h3>Pivot</h3>
<FlexmonsterComponent Toolbar="true"
                      Width="100%"
                      Height="600"
/>

@code {
}

Toolbar, Width, and Height are the FlexmonsterComponent's parameters. Learn more about the FlexmonsterComponent.

Step 6. 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. You can configure a report in Blazor via code or follow the steps below to set the report using a URL:

Step 6.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 6.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:

<h3>Pivot</h3>
<FlexmonsterComponent Report="@report"
                      Toolbar="true"
                      Width="100%"
                      Height="600"
/>

@code {
  string report = "https://cdn.flexmonster.com/reports/report.json";
}

Step 7. Display Flexmonster on the home page

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 Razor component for Flexmonster:

Step 7.1. Open the Pages/Home.razor file (Pages/Index.razor for earlier .NET framework versions) and remove the @page "/" line of code.

Step 7.2. Add the @page "/" line to the Razor component for Flexmonster (e.g., Pivot.razor):

@page "/"

<h3>Pivot</h3>
<FlexmonsterComponent Toolbar="true"
                      Width="100%"
                      Height="600"
/>


@code {
  string report = "https://cdn.flexmonster.com/reports/report.json";
}

Pivot.razor will now be displayed on the home page.

Step 8. Run the project

The Blazor project can be run using 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:

See also