Get Free Trial
Get Free Trial
All documentation
    1. Available tutorials
      1. Sample Blazor project
      2. Integration with Blazor
      3. Usage examples
      4. The FlexmonsterComponent
      5. Configure a report in Blazor
      6. Using methods and events
      7. Accessing Flexmonster functionality through JavaScript
    5. Integration with TypeScript
    6. Integration with module bundlers
    7. Integration with Ionic
    8. Integration with Electron.js
    9. Integration with Flutter
    10. Integration with R Shiny
    11. Integration with jQuery
    12. Integration with React Native
    13. Integration with RequireJS

    • 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

    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 do the following 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.

    Troubleshooting

    If you run into any issues during the integration, visit our troubleshooting page. 

    Next steps

    Frequently asked questions

    Can't find your answer?
    Visit the FAQ

    Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.