|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Dynamically update report configuration in Blazor Pivot Table | Syncfusion |
| 4 | +description: Learn how to dynamically update report configuration and refresh the Blazor Pivot Table component using the RefreshAsync method. |
| 5 | +platform: Blazor |
| 6 | +control: Pivot Table |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Dynamically update report configuration in Blazor Pivot Table Component |
| 11 | + |
| 12 | +The Blazor Pivot Table component supports dynamic data source handling and report manipulation through the [`RefreshAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_RefreshAsync_System_Boolean_) method. This method provides a streamlined and efficient approach to either refresh the component's layout or refresh the entire component, which re-initiates the engine process based on new data or report settings. |
| 13 | + |
| 14 | +The [`RefreshAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_RefreshAsync_System_Boolean_) method enables dynamic and asynchronous refreshing of the Pivot Table layout. It simplifies the update process and enhances responsiveness during runtime changes to report configurations. |
| 15 | + |
| 16 | +## RefreshAsync method parameters |
| 17 | + |
| 18 | +This method accepts a boolean parameter, **allowDataRefresh**, which determines whether the underlying data source should be reprocessed: |
| 19 | + |
| 20 | +* **`false`**: Refreshes only the component's layout based on the current report settings without reprocessing the entire data source. |
| 21 | +* **`true`**: Performs a complete data refresh, which includes reprocessing the data source and recalculating all aggregations. |
| 22 | + |
| 23 | +> By default, the parameter is `false`, which refreshes only the component's layout without reprocessing the underlying data. |
| 24 | +
|
| 25 | +In the following example, `true` is passed to the [`RefreshAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_RefreshAsync_System_Boolean_) method to trigger a full data refresh, updating the Pivot Table with a new row and column added to the report at runtime. |
| 26 | + |
| 27 | +```cshtml |
| 28 | +@using Syncfusion.Blazor.PivotView |
| 29 | +@using Syncfusion.Blazor.Buttons |
| 30 | +
|
| 31 | +<SfButton OnClick="UpdatePivotReport" Content="Update Pivot Report"></SfButton> |
| 32 | +
|
| 33 | +<SfPivotView TValue="ProductDetails" @ref="@pivot" Width="1200" Height="400" ShowGroupingBar="true" ShowFieldList="true"> |
| 34 | + <PivotViewDataSourceSettings DataSource="@data" ExpandAll="true"> |
| 35 | + <PivotViewColumns> |
| 36 | + <PivotViewColumn Name="Year"></PivotViewColumn> |
| 37 | + </PivotViewColumns> |
| 38 | + <PivotViewRows> |
| 39 | + <PivotViewRow Name="Country"></PivotViewRow> |
| 40 | + </PivotViewRows> |
| 41 | + <PivotViewValues> |
| 42 | + <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue> |
| 43 | + <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue> |
| 44 | + </PivotViewValues> |
| 45 | + <PivotViewFormatSettings> |
| 46 | + <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting> |
| 47 | + </PivotViewFormatSettings> |
| 48 | + </PivotViewDataSourceSettings> |
| 49 | +</SfPivotView> |
| 50 | +
|
| 51 | +@code { |
| 52 | + private SfPivotView<ProductDetails> pivot = null!; |
| 53 | + public List<ProductDetails> data { get; set; } = null!; |
| 54 | +
|
| 55 | + protected override void OnInitialized() |
| 56 | + { |
| 57 | + this.data = ProductDetails.GetProductData(); |
| 58 | + } |
| 59 | +
|
| 60 | + public async Task UpdatePivotReport() |
| 61 | + { |
| 62 | + // Adding a new row to the report |
| 63 | + pivot.DataSourceSettings.Rows.Add(new PivotViewRow |
| 64 | + { |
| 65 | + Name = "Products" |
| 66 | + }); |
| 67 | + // Adding a new column to the report |
| 68 | + pivot.DataSourceSettings.Columns.Add(new PivotViewColumn |
| 69 | + { |
| 70 | + Name = "Quarter", |
| 71 | + Caption = "Quarter Name" |
| 72 | + }); |
| 73 | + // Refresh the Pivot Table to reflect the changes |
| 74 | + await pivot.RefreshAsync(true); |
| 75 | + } |
| 76 | +
|
| 77 | + public class ProductDetails |
| 78 | + { |
| 79 | + public int Sold { get; set; } |
| 80 | + public double Amount { get; set; } |
| 81 | + public string? Country { get; set; } |
| 82 | + public string? Products { get; set; } |
| 83 | + public string? Year { get; set; } |
| 84 | + public string? Quarter { get; set; } |
| 85 | +
|
| 86 | + public static List<ProductDetails> GetProductData() |
| 87 | + { |
| 88 | + List<ProductDetails> productDetails = new List<ProductDetails>() |
| 89 | + { |
| 90 | + new ProductDetails { Country = "Canada", Products = "Bike", Year = "FY 2022", Quarter = "Q1", Sold = 35, Amount = 52500 }, |
| 91 | + new ProductDetails { Country = "Canada", Products = "Car", Year = "FY 2022", Quarter = "Q2", Sold = 25, Amount = 62500 }, |
| 92 | + new ProductDetails { Country = "Germany", Products = "Bike", Year = "FY 2023", Quarter = "Q3", Sold = 40, Amount = 60000 }, |
| 93 | + new ProductDetails { Country = "Germany", Products = "Car", Year = "FY 2023", Quarter = "Q4", Sold = 30, Amount = 75000 }, |
| 94 | + new ProductDetails { Country = "United States", Products = "Bike", Year = "FY 2022", Quarter = "Q1", Sold = 50, Amount = 75000 }, |
| 95 | + }; |
| 96 | + return productDetails; |
| 97 | + } |
| 98 | + } |
| 99 | +} |
| 100 | +``` |
0 commit comments