Search results

Excel Export

The Excel export allows Pivot Table data to be exported as Excel document. To enable Excel export in the pivot table, set the AllowExcelExport property in EjsPivotView class to true. Once the API is set, user needs to call the ExcelExport method for exporting on external button click.

The pivot table component can be exported to Excel format using options available in the toolbar. For more details refer here.

@using Syncfusion.EJ2.Blazor.PivotView
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton OnClick="OnExcelExport" Content="Excel Export"></EjsButton>
<EjsPivotView TValue="ProductDetails" @ref="@pivot" @ref:suppressField AllowExcelExport="true" >
    <PivotViewDataSourceSettings DataSource="@data" EnableSorting=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="C0" UseGrouping=true></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
</EjsPivotView>

@code{
    EjsPivotView<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 OnExcelExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args){
        this.pivot.ExcelExport();
    }
}

output

Changing the pivot table style while exporting

The Excel export provides an option to change colors for headers, caption and records in pivot table before exporting. In-order to apply colors, define theme settings in excelExportProperties object and pass it as a parameter to the ExcelExport method.

By default, material theme will be applied to the pivot table during Excel exporting.

@using Syncfusion.EJ2.Blazor.PivotView
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton OnClick="OnExcelExport" Content="Excel Export"></EjsButton>
<EjsPivotView TValue="ProductDetails" @ref="@pivot" @ref:suppressField AllowExcelExport="true" >
    <PivotViewDataSourceSettings DataSource="@data" EnableSorting=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="C0" UseGrouping=true></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
</EjsPivotView>

@code{
    EjsPivotView<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 OnExcelExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) {
        object excelExportProperties = new {
            theme = new {
                header = new { fontName = "Segoe UI", fontColor= "#0fb5fc", fontSize = 15, bold= true },
                record = new { fontName= "Segoe UI", fontColor= "#000000" },
                caption= new { fontName= "Segoe UI", fontColor= "#000000" }
            }
        };
        this.pivot.ExcelExport(excelExportProperties);
    }
}

output

Changing the file name while exporting

The Excel export provides an option to change file name of the document before exporting. In-order to change the file name, define fileName property in excelExportProperties object and pass it as a parameter to the ExcelExport method.

@using Syncfusion.EJ2.Blazor.PivotView
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton OnClick="OnExcelExport" Content="Excel Export"></EjsButton>
<EjsPivotView TValue="ProductDetails" @ref="@pivot" @ref:suppressField AllowExcelExport="true" >
    <PivotViewDataSourceSettings DataSource="@data" EnableSorting=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="C0" UseGrouping=true></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
</EjsPivotView>

@code{
    EjsPivotView<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 OnExcelExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) {
        object excelExportProperties = new {
            fileName = "sample.xlsx"
        };
        this.pivot.ExcelExport(excelExportProperties);
    }
}

output

CSV Export

The Excel export allows pivot table data to be exported in CSV file format as well. To enable CSV export in the pivot table, set the AllowExcelExport property in EjsPivotView class as true. Once the API is set, user needs to call the CsvExport method for exporting on external button click.

The pivot table component can be exported to CSV format using options available in the toolbar. For more details refer here.

@using Syncfusion.EJ2.Blazor.PivotView
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton OnClick="OnCsvExport" Content="Csv Export"></EjsButton>
<EjsPivotView TValue="ProductDetails" @ref="@pivot" @ref:suppressField AllowExcelExport="true" >
    <PivotViewDataSourceSettings DataSource="@data" EnableSorting=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="C0" UseGrouping=true></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
</EjsPivotView>

@code{
    EjsPivotView<ProductDetails> pivot;
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        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 OnCsvExport() {
        this.pivot.CsvExport();
    }
}

output