Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • 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. Create a new Blazor project

    Skip this step if you already have a Blazor project.

    Step 1.1. Start creating a new project:

    Via the File menu

    Here we are creating a new project via the File menu

    Via the start window

    Here we are creating a new project via the start window

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

    Choose the Blazor WebAssembly App template from the project templates menu

    Step 1.3. Enter the name of your project. In the next window, choose the project's configurations. Then click Create:

    Here we show an example of a project configuration

    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:

    How to find the Manage NuGet Packages item

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

    We show how to find the Flexmonster.Blazor package and install it

    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. Right-click the Pages/ folder and select Add > Razor Component in the context menu:

    Here we show how to find the Razor Component item

    Step 5.2. Select Razor Сomponent and click Add:

    Here we show how to add a 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 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.

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

    Step 9. Run the project

    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:

    See also