Need a special offer?Find out if your project fits.
+
Get Free Trial
Get Free Trial
  1. API reference
  • Introduction
    • JavaScript
    React
    Angular
    Vue
    Other integrations
    1. Available tutorials
      2. Integration with Blazor
      1. Sample Blazor project
      2. Integration with Blazor
      3. Usage examples
      4. The FlexmonsterComponent
      5. Using methods and events
      6. Accessing Flexmonster functionality through JavaScript
      Integration with Python
    2. Integration with React Native
    3. Integration with TypeScript
    4. Integration with R Shiny
    5. Integration with Ionic
    6. Integration with Electron.js
    7. Integration with Flutter
    8. Integration with jQuery
    9. Integration with webpack
    10. Integration with RequireJS
    Troubleshooting
    Connecting to Data Source
    Configuring the component
    Saving component configs
    Customizing
    Charts
    License keys
    Accessibility
    Security
    Updating to the latest version
    Flexmonster CLI Reference
  • Browser compatibility
  • Documentation for older versions
    • All documentation

    Sample Blazor project

    This guide will help you run a sample Blazor project from GitHub. It is a ready-to-use application with several live Flexmonster demos. Get the sample project to try out Flexmonster.

    To integrate Flexmonster into an existing Blazor project, see integration with Blazor.

    Prerequisites

    Step 1. Get the sample Blazor project

    Download a .zip archive with the sample project or clone it from GitHub with the following commands:

    git clone https://github.com/flexmonster/pivot-blazor
cd pivot-blazor

    Step 2. Run the project

    Run the sample project from the console:

    cd Flexmonster.Blazor.Sample
dotnet run

    Open http://localhost:5000/ in your browser to see the result. The application can be shut down manually with Ctrl + C.

    Step 3. Check out the project’s structure

    Our sample project is based on a Blazor WebAssemly template project, so most of the project’s files are the same as in the template. Learn more about a Blazor WebAssembly project structure.

    Now take a look at the files specific to our sample project:

    • Flexmonster.Blazor.Sample/Shared — menus and toggle elements used in the sample project.
    • Flexmonster.Blazor.Sample/Pages — demos that cover different aspects of Flexmonster usage in Blazor:
      • Creating the pivot table (PivotTableDemo.razor)
      • Handling events (HandlingEvents.razor)
      • Using API calls (UsingApiCalls.razor)
      • Updating data at runtime (UpdatingData.razor)

    Learn more about how these demos work: Usage examples.

    What's next?

    Integrate into an existing Blazor project or adjust the sample project to your needs: