Pivot Table Change Rows & Filters & etc. on button click

Hi there,

I would like to provide a predefined set of reports to my customer using the PivotTable.

Therefore I have added a bunch of Buttons to the Blazor page. Each button should change the rows, columns, filters etc. according to a predefined setting.

I am able to clear the rows in the datasource settings and I can add a new one. But I am not able to refresh the UI correctly. Maybe I am not using the correct refresh function.

Here is my code

public async Task Pivot_RowUpdate()
{
this.PivotTable.DataSourceSettings.Rows.Clear();
this.PivotTable.DataSourceSettings.Rows.Add(new PivotViewRow() { Name = "customer", Caption = "Customer Name" });
await this.PivotTable.LayoutRefreshAsync();
await InvokeAsync(this.StateHasChanged);
}

Any help would be appriciated. Thanks in advance. Benjamin


2 Replies 1 reply marked as answer

AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team October 12, 2023 09:04 AM UTC

Hi Martin,


We are validating this query at our end and we will update the details in two business days(Oct 16, 2023).


Regards,

Angelin Faith Sheeba.



AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team October 16, 2023 11:57 AM UTC

Hi Martin,


Thanks for the patience. We checked the provided code example. On that basis, we believe that your requirement is to modify the rows, columns, and filters of the pivot table dynamically through external button click. If so, you can able to achieve it by assigning the appropriate row/column settings to the properties directly. Please refer to the code example below to change the rows, columns and filter using the external button.


Code example:

<SfButton OnClick="OnRowChange" Content="Change Row"></SfButton>

<SfButton OnClick="OnColumnChange" Content="Change Column"></SfButton>

<SfButton OnClick="OnFilterChange" Content="Change Filter"></SfButton>

 

@code {

    SfPivotView<ProductDetails> pivot;

    public async Task OnRowChange(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)

    {

       // Cleared the existing rows and added the rows dynamically here.

        this.pivot.DataSourceSettings.Rows.Clear();

        List<PivotViewRow> rows = new List<PivotViewRow> {

            new PivotViewRow() { Name = "Country", Caption = "Customer Name" }

        };

        this.pivot.DataSourceSettings.Rows = rows;

    }

    public async Task OnColumnChange(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)

    {

        // Cleared the existing columns and added the columns dynamically here.

        this.pivot.DataSourceSettings.Columns.Clear();

        List<PivotViewColumn> columns = new List<PivotViewColumn>

        {

            new PivotViewColumn() { Name = "Quarter"}

        };

        this.pivot.DataSourceSettings.Columns = columns;

    }

    public async Task OnFilterChange(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)

    {

        // Added the Filters dynamically here.

        List<PivotViewFilter> filter = new List<PivotViewFilter>

        {

            new PivotViewFilter() { Name = "Products"}

        };

        this.pivot.DataSourceSettings.Filters = filter;

    }

}


Output screenshot:


Meanwhile, we have prepared a sample for your reference. Please find it from the below attachment.


Please let us know if any concern occurs.


Regards,

Angelin Faith Sheeba.



Attachment: PivotTable_85f461a5.zip

Marked as answer
Loader.
Up arrow icon