Flexmonster MCP Server is here! Connect your ✨AI assistant to our documentation. Get started
+
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

    • The FlexmonsterComponent

    The FlexmonsterComponent embeds Flexmonster into a Blazor application.

    The simplest component usage

    To add an empty pivot table, specify the <FlexmonsterComponent/> tag without any parameters:

    <FlexmonsterComponent/>

    Learn more about integration with Blazor.

    Available parameters

    The FlexmonsterComponent’s parameters are equivalent to Flexmonster’s parameters, but with certain differences:

    • The Width and Height parameters have the string type and require a string value.
    • The FlexmonsterComponent does not support the following parameters:
      • customizeAPIRequest
      • customizeCell
      • customizeChartElement
      • customizeContextMenu
    • The FlexmonsterComponent has the Theme parameter, which is not available in the new Flexmonster() API call. Using this parameter, you can change Flexmonster’s theme. See how to set a theme for the component in Blazor.
    • The FlexmonsterComponent has the JavaScriptHandler parameter, which is not available in the new Flexmonster() API call.
      With the JavaScriptHandler, you can use JavaScript to access Flexmonster features that are not supported in Blazor out of the box (e.g., Toolbar customization).
      See how to access Flexmonster functionality through JavaScript.

    Setting the FlexmonsterComponent's parameters

    The FlexmonsterComponent’s parameters can be set as variables or as hardcoded values:

    Variable

    Enclose the variable's name in double quotes ("") and add the @ prefix to it:

    <FlexmonsterComponent Report="@report"
                      Height="@height"
                      Width="@width"
                      Toolbar="@toolbar"
                      Accessibility="@accessibility"
/>

    The specified variables should be defined in the @code section of the component:

    @code {
  string report = "https://cdn.flexmonster.com/github/demo-report.json";
  string height = "600";
  string width = "100%";
  bool toolbar = true;
  AccessibilityOptions accessibility = new AccessibilityOptions();
}

    In Blazor, you can also set parameters using attribute splatting.

    Hardcoded value

    String and boolean values are specified in the same way as in most programming languages:

    <FlexmonsterComponent Height="600"
                      Width="100%"
                      Toolbar=true
/>

    To pass an object as a parameter value, specify the object in the "@(<object>)" format:

    <FlexmonsterComponent 
  Accessibility="@(new AccessibilityOptions())"
/>

    Note that when setting a report using a link, the link must be specified in the object-like '@("<link-to-file>")' format:

    <FlexmonsterComponent
  Report='@("https://cdn.flexmonster.com/github/demo-report.json")'
/>

    Learn more about component parameters in Blazor.

    See also

    Frequently asked questions

    Can't find your answer here?
    Visit the FAQ page

    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.