Usage examples

This guide lists examples of Flexmonster usage in Blazor. They are provided within our sample Blazor project.

Creating the pivot table

The first example demonstrates how to embed Flexmonster into your project with the FlexmonsterComponent.

Notice how initialization parameters are specified in <FlexmonsterComponent>:

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

@code {
  string report = "https://cdn.flexmonster.com/github/demo-report.json";
}

Learn more about FlexmonsterComponent and its parameters: The FlexmonsterComponent.

Handling events

This usage example focuses on Flexmonster events. It provides a toggle button to subscribe to all the events and unsubscribe from them.

Under the component, there is a log output. When an event is triggered, the output shows info about that event.

To subscribe to an event, we use the += operator:

flexmonster.<EventName> += EventHandlerName;

To unsubscribe from an event, we use the -= operator:

flexmonster.<EventName> -= EventHandlerName;

Learn more about using Flexmonster events in Blazor.

Using API calls

The Using API calls section is about interacting with the component through API calls. Use the toggle buttons to enable the read‑only mode or switch between the grid and charts.

See how the API calls are used:

The showGrid() and showCharts() methods allow switching between the views:

private async Task ControllGridCharts(bool isGrid)
{
  if (!isGrid)
  {
    await flexmonster.ShowGrid();
  }
  else
  {
    await flexmonster.ShowCharts();
  }
}

The setOptions() API call is used to make Flexmonster read-only:

private async Task ControllInteractiveness(bool isReadonly)
{
  await flexmonster.SetOptions(new Options()
  {
    ReadOnly = isReadonly
  });
  await flexmonster.Refresh();
}

Learn more about using Flexmonster methods in Blazor.

Updating data

The Updating data section shows how to refresh data at runtime.

Each time you click the Update data button, the dataset is updated and loaded to Flexmonster using the updateData() API call:

private async Task UpdateData() 
{
  var newData = new object[] {
    // Updated data
  };

  await flexmonster.UpdateData(new DataSource() { Data = newData });
}