Need a special offer?Find out if your project fits.
+
  1. API reference
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Table of contents

    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

    Step 1. (optional) Create a Blazor 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:

    Start creating a new project

    Step 1.2. In the project templates menu, select the Blazor WebAssembly App template:

    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:

    Select a .NET version

    Note The created application will run using the HTTP protocol.

    Step 2. Install the Flexmonster.Blazor package

    You can install the Flexmonster.Blazor package using either the NuGet Package Manager or the console:

    Using NuGet

    Step 2.1. Right-click the project's name and select Manage NuGet Packages:

    Open NuGet

    Step 2.2. In the Browse tab, search for the Flexmonster.Blazor package and install it:

    Install the FlexmonsterBlazor package

    Using the console

    Install Flexmonster.Blazor by running the following command in 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 end of 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="PivotBlazor.styles.css" rel="stylesheet" />
      <script src="_content/Flexmonster.Blazor/blazor-flexmonster.js"></script>
      <!-- Other metadata tags -->
    </head>

    Step 5. Create a new Razor component

    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:

    Add Razor Component

    Step 5.2. Select Razor Сomponent and click Add:

    Add Razor Component

    As a result, a Pivot.razor component will be added to the Pages/ folder.

    Step 6. Add Pivot.razor to the home page

    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.

    Step 7. Add Flexmonster to the Razor component

    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.

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

    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";
    }

    Step 9. Run the project

    You can run the Blazor project using either Visual Studio or the console:

    Using Visual Studio

    Run the project in Visual Studio by clicking the IIS Express button on the toolbar:

    The IIS Express button on the toolbar

    The application will be automatically opened in the browser.

    Using the console

    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:

    See also