We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Accessing Flexmonster functionality through JavaScript

    Some of Flexmonster's methods and events are not supported in Blazor out of the box (see the list of such methods and events). However, you can use JavaScript to access them.

    Prerequisites

    • A Blazor application with Flexmonster embedded into it.
      If Flexmonster is not yet embedded, see Integration with Blazor.

    Access Flexmonster’s features through JavaScript

    To demonstrate this approach, let’s customize the Toolbar using JavaScript:

    Step 1. In your project, go to the wwwroot/index.html file and create an empty <script> section there:

    <body>
      <app>Loading...</app>
    
      <script src="_framework/blazor.webassembly.js"></script>
      <script>
      </script>
    </body>

    This section will contain your JavaScript code for Flexmonster.

    Step 2. Inside the window object, create a JavaScript function and pass a Flexmonster instance to it. This instance can be used to access the Flexmonster API. For example:

    <body>
      <app>Loading...</app>
     
      <script src="_framework/blazor.webassembly.js"></script>
      <script>
        /* The window.customizeToolbar function subscribes
           Flexmonster to the beforetoolbarcreated event
        */
        window.customizeToolbar = (pivot) => {
          pivot.on("beforetoolbarcreated", customizeToolbarHandler);
        }
     
        function customizeToolbarHandler(toolbar) {
          // Get all tabs
          let tabs = toolbar.getTabs();
          toolbar.getTabs = function () {
            // Remove the Connect tab using its id
            tabs = tabs.filter(tab => tab.id != "fm-tab-connect");
            return tabs;
          }
        }
      </script>
    </body>

    Step 3. Open the file with Flexmonster (e.g., Pivot.razor) and specify your JavaScript function (e.g., customizeToolbar) in the FlexmonsterComponent’s JavaScriptHandler parameter:

    @page  "/"
    
    <h3>Pivot</h3>
    <FlexmonsterComponent Report="@report"
                          Toolbar="true"
                          Width="100%"
                          Height="600"
                          JavaScriptHandler="customizeToolbar"
    />

    The window.customizeToolbar function will be called after the Flexmonster instance is created. As a result, your customization will be applied to Flexmonster.

    See also