To know more about this event, refer here.
To know more about this event, refer here.
The event BeginDrillThrough is triggered when value cell is clicked in the Pivot Table while editing. To use this event, user need to enable editing option with the help of PivotViewCellEditSettings class. It has following parameters - CellInfo and Type. This event allows user to view the CellInfo which contains ColumnHeaders, CurrentCell, CurrentTarget, RawData, RowHeaders and Value.
In this event, the parameter
GridObjis returned as null due to its size.
@using Syncfusion.Blazor.PivotView
<SfPivotView TValue="ProductDetails">
<PivotViewDataSourceSettings DataSource="@data">
<PivotViewColumns>
<PivotViewColumn Name="Year"></PivotViewColumn>
<PivotViewColumn Name="Quarter"></PivotViewColumn>
</PivotViewColumns>
<PivotViewRows>
<PivotViewRow Name="Country"></PivotViewRow>
<PivotViewRow Name="Products"></PivotViewRow>
</PivotViewRows>
<PivotViewValues>
<PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
<PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
</PivotViewValues>
</PivotViewDataSourceSettings>
<PivotViewEvents TValue="ProductDetails" BeginDrillThrough="beginDrill"></PivotViewEvents>
<PivotViewCellEditSettings AllowEditing=true AllowAdding=true AllowDeleting=true Mode=EditMode.Normal></PivotViewCellEditSettings>
</SfPivotView>
@code{
public List<ProductDetails> data { get; set; }
protected override void OnInitialized()
{
this.data = ProductDetails.GetProductData().ToList();
//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
}
private void beginDrill(BeginDrillThroughEventArgs args)
{
//args.CellInfo -> consists of cell info for drillthrough
}
}To know more about this event, refer here.
The event CellClick is triggered whenever a cell is clicked in the Pivot Table component. It has following parameters - CurrentCell and Data. For instance, using this event end user can either add or remove CSS class name from the respective cell and also perform many other DOM manipulations.
@using Syncfusion.Blazor.PivotView
<SfPivotView TValue="ProductDetails">
<PivotViewDataSourceSettings DataSource="@data">
<PivotViewColumns>
<PivotViewColumn Name="Year"></PivotViewColumn>
<PivotViewColumn Name="Quarter"></PivotViewColumn>
</PivotViewColumns>
<PivotViewRows>
<PivotViewRow Name="Country"></PivotViewRow>
<PivotViewRow Name="Products"></PivotViewRow>
</PivotViewRows>
<PivotViewValues>
<PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
<PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
</PivotViewValues>
</PivotViewDataSourceSettings>
<PivotViewEvents TValue="ProductDetails" CellClick="cellClick"></PivotViewEvents>
</SfPivotView>
@code{
public List<ProductDetails> data { get; set; }
protected override void OnInitialized()
{
this.data = ProductDetails.GetProductData().ToList();
//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
}
private void cellClick(CellClickEventArgs args)
{
args.CurrentCell.AddClass(new string[] { "e-test" });
}
}To know more about this event, refer here.
The event CellSelecting is triggered when cell selection is about to initiate in the Pivot Table. To use this event, AllowSelection property in PivotViewGridSettings must be set to true. It has following parameters - Cancel, CurrentCell, IsCellClick and Data. For instance, using this event user can pass those selected cell information to any external component for data binding.
@using Syncfusion.Blazor.PivotView
<SfPivotView TValue="ProductDetails">
<PivotViewDataSourceSettings DataSource="@data">
<PivotViewColumns>
<PivotViewColumn Name="Year"></PivotViewColumn>
<PivotViewColumn Name="Quarter"></PivotViewColumn>
</PivotViewColumns>
<PivotViewRows>
<PivotViewRow Name="Country"></PivotViewRow>
<PivotViewRow Name="Products"></PivotViewRow>
</PivotViewRows>
<PivotViewValues>
<PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
<PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
</PivotViewValues>
</PivotViewDataSourceSettings>
<PivotViewEvents TValue="ProductDetails" CellSelecting="cellSelecting"></PivotViewEvents>
</SfPivotView>
@code{
public List<ProductDetails> data { get; set; }
protected override void OnInitialized()
{
this.data = ProductDetails.GetProductData().ToList();
//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
}
private void cellSelecting(PivotCellSelectedEventArgs args)
{
args.CurrentCell.AddClass(new string[] { "e-test" });
}
}The event ChartSeriesCreated is triggered once chart series are completely rendered. This event is triggered only when View property in PivotViewDisplayOption class is set to Chart. It has following parameter - Cancel, and Series. When the parameter Cancel is set to true, chart series rendered will be revoked.
@using Syncfusion.Blazor.PivotView
<SfPivotView TValue="ProductDetails">
<PivotViewDataSourceSettings DataSource="@data">
<PivotViewColumns>
<PivotViewColumn Name="Year"></PivotViewColumn>
<PivotViewColumn Name="Quarter"></PivotViewColumn>
</PivotViewColumns>
<PivotViewRows>
<PivotViewRow Name="Country"></PivotViewRow>
<PivotViewRow Name="Products"></PivotViewRow>
</PivotViewRows>
<PivotViewValues>
<PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
<PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
</PivotViewValues>
</PivotViewDataSourceSettings>
<PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>
<PivotViewEvents TValue="ProductDetails" ChartSeriesCreated="chartSeries"></PivotViewEvents>
</SfPivotView>
@code{
public List<ProductDetails> data { get; set; }
protected override void OnInitialized()
{
this.data = ProductDetails.GetProductData().ToList();
//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
}
private void chartSeries(ChartSeriesCreatedEventArgs args)
{
args.Cancel = true;//chart series will not be rendered
}
}The event ConditionalFormatting is triggered initially while clicking the “ADD CONDITION” button inside the conditional formatting dialog in-order to fill user specific condition instead of default condition at runtime. To use this event, AllowConditionalFormatting property in SfPivotView class must be set to true. It has following parameters - ApplyGrandTotals, Conditions, Label, Measure, Style, Value1 and Value2.
@using Syncfusion.Blazor.PivotView
@using Syncfusion.Blazor.Buttons
<SfButton CssClass="apply-button" IsPrimary="true" OnClick="@OnClick">Apply Format</SfButton>
<SfPivotView TValue="ProductDetails" @ref="@Pivot" AllowConditionalFormatting="true">
<PivotViewDataSourceSettings DataSource="@data">
<PivotViewColumns>
<PivotViewColumn Name="Year"></PivotViewColumn>
<PivotViewColumn Name="Quarter"></PivotViewColumn>
</PivotViewColumns>
<PivotViewRows>
<PivotViewRow Name="Country"></PivotViewRow>
<PivotViewRow Name="Products"></PivotViewRow>
</PivotViewRows>
<PivotViewValues>
<PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
<PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
</PivotViewValues>
</PivotViewDataSourceSettings>
<PivotViewEvents TValue="ProductDetails" ConditionalFormatting="conditionalFormat"></PivotViewEvents>
</SfPivotView>
@code{
public List<ProductDetails> data { get; set; }
protected override void OnInitialized()
{
this.data = ProductDetails.GetProductData().ToList();
//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
}
SfPivotView<ProductDetails> Pivot;
public async Task OnClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
await this.Pivot.ShowConditionalFormattingDialogAsync();
}
private void conditionalFormat(ConditionalFormatSettings args)
{
//to change the conditional formatting settings in conditional format dialog
args.Style.BackgroundColor = "Blue";
args.Value1 = 23459;
}
}The event Drill is triggered whenever a member is expanded or collapsed in the Pivot Table. It has following parameters - DrillInfo and PivotView. For instance using this event user can alter delimiter and drill action for the respective item.
In this event the parameter
PivotViewis returned as null due to its size.
@using Syncfusion.Blazor.PivotView
<SfPivotView TValue="ProductDetails" AllowConditionalFormatting="true">
<PivotViewDataSourceSettings DataSource="@data">
<PivotViewColumns>
<PivotViewColumn Name="Year"></PivotViewColumn>
<PivotViewColumn Name="Quarter"></PivotViewColumn>
</PivotViewColumns>
<PivotViewRows>
<PivotViewRow Name="Country"></PivotViewRow>
<PivotViewRow Name="Products"></PivotViewRow>
</PivotViewRows>
<PivotViewValues>
<PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
<PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
</PivotViewValues>
</PivotViewDataSourceSettings>
<PivotViewEvents TValue="ProductDetails" Drill="drill"></PivotViewEvents>
</SfPivotView>
@code{
public List<ProductDetails> data { get; set; }
protected override void OnInitialized()
{
this.data = ProductDetails.GetProductData().ToList();
//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
}
private void drill(DrillArgs<ProductDetails> args)
{
//args.DrillInfo --> Here you can get drilled cell information.
}
}The event DrillThrough is triggered when a value cell is clicked in the Pivot Table during drill through operation. It has following parameter - ColumnHeaders, CurrentCell, CurrentTarget, RawData, RowHeaders and Value. This event allows user to view cell information like ColumnHeaders, CurrentCell, CurrentTarget, RawData, RowHeaders and Value for the appropriate cell in which drill through is performed. Exclusively the event helps to view and process the raw data information behind a aggregated value inside value cell.
@using Syncfusion.Blazor.PivotView
<SfPivotView TValue="ProductDetails" AllowConditionalFormatting="true" AllowDrillThrough="true">
<PivotViewDataSourceSettings DataSource="@data">
<PivotViewColumns>
<PivotViewColumn Name="Year"></PivotViewColumn>
<PivotViewColumn Name="Quarter"></PivotViewColumn>
</PivotViewColumns>
<PivotViewRows>
<PivotViewRow Name="Country"></PivotViewRow>
<PivotViewRow Name="Products"></PivotViewRow>
</PivotViewRows>
<PivotViewValues>
<PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
<PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
</PivotViewValues>
</PivotViewDataSourceSettings>
<PivotViewEvents TValue="ProductDetails" DrillThrough="drillThrough"></PivotViewEvents>
</SfPivotView>
@code{
public List<ProductDetails> data { get; set; }
protected override void OnInitialized()
{
this.data = ProductDetails.GetProductData().ToList();
//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
}
private void drillThrough(DrillThroughEventArgs args)
{
//args --> Here you can get the information of the clicked cell.
}
}The EnginePopulating event is available in both Pivot Table and Field List.
EnginePopulating is triggered from Field List object whenever the report gets modified in its UI.EnginePopulating event is triggered from Pivot Table object whenever the report gets modified via grouping bar, toolbar, etc.This event will be triggered before engine framing works gets initiated and allows user to customize the pivot datasource settings. It has following parameter - DataSourceSettings.
@using Syncfusion.Blazor.PivotView
<SfPivotView TValue="ProductDetails" AllowConditionalFormatting="true">
<PivotViewDataSourceSettings DataSource="@data">
<PivotViewColumns>
<PivotViewColumn Name="Year"></PivotViewColumn>
<PivotViewColumn Name="Quarter"></PivotViewColumn>
</PivotViewColumns>
<PivotViewRows>
<PivotViewRow Name="Country"></PivotViewRow>
<PivotViewRow Name="Products"></PivotViewRow>
</PivotViewRows>
<PivotViewValues>
<PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
<PivotViewValue Name="Amount" Caption="Amount"></PivotViewValue>
</PivotViewValues>
</PivotViewDataSourceSettings>
<PivotViewEvents TValue="ProductDetails" EnginePopulating="enginePopulating"></PivotViewEvents>
</SfPivotView>
@code{
public List<ProductDetails> data { get; set; }
protected override void OnInitialized()
{
this.data = ProductDetails.GetProductData().ToList();
//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
}
private void enginePopulating(EnginePopulatingEventArgs args)
{
//args.DataSourceSettings --> User can modify the report before engine populates.
}
}The EnginePopulated event is available in both Pivot Table and Field List. To know more about this event, refer here.
To know more about this event, refer here.
To know more about this event, refer here.
To know more about this event, refer here.
To know more about this event, refer here.
The FieldDropped event is available in both Grouping Bar and Field List.
To know more about this event with respect to field list operation, refer here.
To know more about this event with respect to grouping bar operation, refer here.
To know more about this event, refer here.
To know more about this event, refer here.
To know more about this event, refer here.
To know more about this event, refer here.
To know more about this event, refer here.
The OnLoad event is available in both Pivot Table and Field List.
To know more about this event, refer here.
To know more about this event, refer here.
To know more about this event, refer here.
To know more about this event, refer here.
The event ToolbarRender is triggered before rendering of toolbar. This event is available only when toolbar is enabled in the Pivot Table. It has following parameter - CustomToolbar. Using this event user can add custom toolbar items as well as remove existing items from the toolbar.
@using Syncfusion.Blazor.PivotView
<SfPivotView TValue="ProductDetails" ShowFieldList="true" ShowToolbar="true" Toolbar="@toolbar" AllowConditionalFormatting="true" AllowPdfExport="true" AllowExcelExport="true">
<PivotViewDisplayOption Primary=Primary.Table View=View.Both></PivotViewDisplayOption>
<PivotViewDataSourceSettings DataSource="@data" ShowGrandTotals="true" ShowSubTotals="true">
<PivotViewColumns>
<PivotViewColumn Name="Year"></PivotViewColumn>
<PivotViewColumn Name="Quarter"></PivotViewColumn>
</PivotViewColumns>
<PivotViewRows>
<PivotViewRow Name="Country"></PivotViewRow>
<PivotViewRow Name="Products"></PivotViewRow>
</PivotViewRows>
<PivotViewValues>
<PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
<PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
</PivotViewValues>
<PivotViewFormatSettings>
<PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
</PivotViewFormatSettings>
</PivotViewDataSourceSettings>
<PivotViewEvents TValue="ProductDetails" ToolbarRendered="toolbarRender" RenameReport="renameReport" RemoveReport="removeReport" SaveReport="saveReport" LoadReport="loadReport" FetchReport="fetchReport" ></PivotViewEvents>
<PivotViewGridSettings ColumnWidth="140"></PivotViewGridSettings>
</SfPivotView>
@code{
public List<ToolbarItems> toolbar = new List<ToolbarItems> {
ToolbarItems.New,
ToolbarItems.Load,
ToolbarItems.Remove,
ToolbarItems.Rename,
ToolbarItems.SaveAs,
ToolbarItems.Save,
ToolbarItems.Grid,
ToolbarItems.Chart,
ToolbarItems.Export,
ToolbarItems.SubTotal,
ToolbarItems.GrandTotal,
ToolbarItems.ConditionalFormatting,
ToolbarItems.FieldList
};
SfPivotView<ProductDetails> pivot;
public List<ProductDetails> data { get; set; }
protected override void OnInitialized()
{
this.data = ProductDetails.GetProductData().ToList();
//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
}
public void toolbarRender(ToolbarArgs args)
{
//args.CustomToolbar -> Can add or remove toolbar items.
}
public List<string> report = new List<string>();
public List<string> reportName = new List<string>();
//to save report
public void saveReport(SaveReportArgs args)
{
var i = 0;
bool isSaved = false;
for (i = 0; i < this.reportName.Count; i++)
{
if (this.reportName[i] == args.ReportName)
{
this.report[i] = args.Report;
isSaved = true;
}
}
if (args.Report != null && !(isSaved))
{
this.report.Add(args.Report);
this.reportName.Add(args.ReportName);
}
}
//fetch reports
public void fetchReport(FetchReportArgs args)
{
args.ReportName = this.reportName.ToArray();
}
//to load the selected report
public void loadReport(LoadReportArgs args)
{
var i = 0;
var j = 0;
for (i = 0; i < this.reportName.Count; i++)
{
if (this.reportName[i] == args.ReportName)
{
j = i;
}
}
this.pivot.LoadPersistDataAsync(this.report[j]);
}
//to delete a report
public void removeReport(RemoveReportArgs args)
{
var i = 0;
for( i=0;i<this.reportName.Count; i++)
{
if(this.reportName[i] == args.ReportName)
{
this.reportName.RemoveAt(i);
this.report.RemoveAt(i);
}
}
}
// to rename a report
public void renameReport(RenameReportArgs args)
{
var i = 0;
for( i=0;i<=(this.reportName.Count - 1); i++)
{
if(this.reportName[i] == args.ReportName)
{
this.reportName.RemoveAt(i);
this.reportName.Add(args.Rename);
}
}
}
}You can refer to our Blazor Pivot Table feature tour page for its groundbreaking feature representations. You can also explore our Blazor Pivot Table example to knows how to render and configure the pivot table.