Change Pivot Groups/Values/Rows Programmatically

[Jonah Coleman]

I've been struggling with this for a while, coming up with different ways to achieve it as things keep changing (and breaking my work-arounds) when you have releases.  This last release has me stumped- I can't come up with a way to do this.

Previously I would set shouldDrawPivotTable to false, then call .Click() on another SfButton that sets it back to true and this would work- it would render the page without the pivot table, then render it again with it in the new layout.

What's the right way to do this?  .Refresh() on the pivot control just refreshes data, not grouping/values/rows.

@page "/"

@using Syncfusion.Blazor.Popups;

@using Syncfusion.Blazor.PivotView

<Syncfusion.Blazor.Buttons.SfButton Content="Change View" OnClick="ChangeViewButtonClick"></Syncfusion.Blazor.Buttons.SfButton>

<Syncfusion.Blazor.Buttons.SfButton Content="Remove Draw" OnClick="RemoveDrawButtonViewClick"></Syncfusion.Blazor.Buttons.SfButton>

@if (shouldDrawPivotTable)

{

    <SfPivotView TValue="ProductDetails" Height="300">

        <PivotViewDataSourceSettings DataSource="@dataSource">

            <PivotViewColumns>

                @{

                    switch (viewNumber)

                    {

                        case 0:

                            <PivotViewColumn Name="Year"></PivotViewColumn>

                            <PivotViewColumn Name="Quarter"></PivotViewColumn>

                            break;

                        case 1:

                            <PivotViewColumn Name="Quarter"></PivotViewColumn>

                            <PivotViewColumn Name="Year"></PivotViewColumn>

                            break;

                        case 2:

                            <PivotViewColumn Name="Year"></PivotViewColumn>

                            break;

                    }

                }

            </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>

        </PivotViewDataSourceSettings>

    </SfPivotView>

}

@code{

    public List<ProductDetails> dataSource { get; set; }

    protected int viewNumber = 0;

    protected void ChangeViewButtonClick()

    {

        viewNumber++;

        if (viewNumber > 2) viewNumber = 0;

        shouldDrawPivotTable = true;

        StateHasChanged();

    }

    protected bool shouldDrawPivotTable = true;

    protected void RemoveDrawButtonViewClick()

    {

        shouldDrawPivotTable = false;

    }

    protected override void OnInitialized()

    {

        this.dataSource = ProductDetails.GetProductData().ToList();

    }

    public class ProductDetails

    {

        public int Sold { get; set; }

        public double Amount { get; set; }

        public string Country { get; set; }

        public string Products { get; set; }

        public string Year { get; set; }

        public string Quarter { get; set; }

        public static List<ProductDetails> GetProductData()

        {

            List<ProductDetails> productData = new List<ProductDetails>();

            productData.Add(new ProductDetails { Sold = 31, Amount = 52824, Country = "France", Products = "Mountain Bikes", Year = "FY 2015", Quarter = "Q1" });

            productData.Add(new ProductDetails { Sold = 51, Amount = 86904, Country = "France", Products = "Mountain Bikes", Year = "FY 2015", Quarter = "Q2" });

            productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2015", Quarter = "Q3" });

            productData.Add(new ProductDetails { Sold = 25, Amount = 42600, Country = "France", Products = "Mountain Bikes", Year = "FY 2015", Quarter = "Q4" });

            return productData;

        }

    }

            }

[Mouli Eswararao]

Hi Jonah, 

Thanks for contacting Syncfusion support, 

We have prepared a sample for you to how to programmatically change the columns in the pivot table. While adding and removing columns from the pivot table we must rerender the component to display columns properly. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Pivot_Table-991938576   

Please contact us if you have any queries on this. 

Regards, 

Mouli 

[Jonah Coleman]

Thanks, seems obvious once you show it.  Perfect.

[Sivamathi Natarajan]

Hi Jonah, 

 

Thanks for the reply. 

 

Regards, 

Sivamathi.