☝️Small business or a startup? See if you qualify for our special offer.

+

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:

Setting a theme

To change Flexmonster’s default CSS theme, use the Theme property of the FlexmonsterComponent.

To apply one of the predefined themes provided by Flexmonster (e.g., dark), specify the theme’s name in the property:

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

Using a custom theme

If you want to use a custom theme, set Theme="none" to remove default CSS styles. Then, add a reference to the custom theme’s CSS to your project.

See also