Assigning a custom style to level of nested rows in pivot table

[Leland]

Hello,

Is it possible to assign a custom css class to the particular level that a row is grouped?

For example if I had something like: 

<SfPivotView TValue="Data" Height="900">
    <PivotViewDataSourceSettings DataSource="@_dataSource" ExpandAll="true">
        <PivotViewRows>
            <PivotViewRow Name="Company"></PivotViewRow>
            <PivotViewRow Name="Department"></PivotViewRow>
            <PivotViewRow Name="Employee"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Name" Caption="Name"></PivotViewValue>
            <PivotViewValue Name="YearsEmployed" Caption="Years Employed"></PivotViewValue>
            <PivotViewValue Name="Salary" Caption="Salary"></PivotViewValue>
        </PivotViewValues>
</SfPivotView>

To get it formatted so that the company row has a particular format, the department row has a particular format, ect similar to the screenshot here?

The only documentation I found below only shows generic things in style templates such as the rowheader/columnheader,summary cell ect. 

https://blazor.syncfusion.com/documentation/pivot-table/css-customization

Thank you

[AngelinFaithSheeba PaulvannanRajadurai]

Hi LeLand,

Using EnginePopulated event you can apply custom styles to the row headers in the pivot table as per your need. Please refer the below code example and screenshot.

Code example:

<SfPivotView>

   <PivotViewEvents TValue="ProductDetails" EnginePopulated="EnginePopulated"></PivotViewEvents>

   <PivotViewValueSortSettings HeaderDelimiter="@HeaderDelimiter"></PivotViewValueSortSettings>

</SfPivotView>

 

<style>

   .e-level0{

        background-color: green;

    }

    .e-level1{

        background-color: pink;

    }

</style>

 

@code{

    private void EnginePopulated(EnginePopulatedEventArgs args)

    {

        for (var i = 0; i < args.PivotValues.Count(); i++)

        {

            var row = args.PivotValues[i];

            for (var j = 0; (row != null && j < row.Count()); j++)

            {

                if (row[0] != null && row[j] != null)

                {

                    var cellData = args.PivotValues[i][j];

                    if(cellData.Axis == "row")

                    {

                        if (cellData.Level == 0)

                        {

                            ParentHeader = args.PivotValues[i][j].FormattedText;

                        } else if (cellData.Level == 1)

                        {

                            ChildHeader = args.PivotValues[i][j].FormattedText;

                        }   

                    }

                    if(cellData.RowHeaders!= null)

                    {

                        if(cellData.RowHeaders == ParentHeader)

                        {

                            cellData.CssClass = "e-level0";

                        } else if (cellData.RowHeaders.ToString() == (ParentHeader + HeaderDelimiter + ChildHeader))

                       {

                            cellData.CssClass = "e-level1";

                        }  

                    }

                }

            }

        }

    }

  }

 

Screenshot:

Meanwhile, we have prepared a sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PivotTable370756354

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba

[Leland]

Hello,

Thank you for the sample this is the functionality I need. However is there a setting somewhere that may be overriding this else where in the project. Just copying the code provided into my current project does not work. In the debugger I can see that the CssClass is being changed, but this does not result in the UI component rendering any differently. 

Thank you,

[Leland]

See attached for example project with the issue stated above. 

Attachment: PivotTable_cd78d245.zip

[AngelinFaithSheeba PaulvannanRajadurai]

Hi LeLand,

Please update your packages to the latest version(v20.2.45) to resolve the reported problem at your end. Meanwhile, we have modified your sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TradeLogic.Web1189243221

Screenshot:

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba

[Leland]

Hello, thank you for the update.

It appears that this method only works when the Pivot View has defined PivotViewColumns. Is there a way to have this same functionality without defining any columns? In my particular case I do not have a need for them at this time.

In the sample you have provided you can replicate the issue by commenting out or removing:

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

Running the code without this you can still see that the cellData.CssClass is being changed to the appropriate style but that is not reflecting in the rendered component.

Thank you

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Leland,

Please refer the below code example to resolve the reported problem at your end.

Code example:

<style>

    .e-level0{

        background-color: green !important;

    }

    .e-level1{

        background-color: pink !important;

    }

</style>

Output screenshot:

Meanwhile, we have modified your sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TradeLogic.Web-1052845550

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba

[Leland]

Thank you for the reply, This seems to solve the issue.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Leland,

Please contact us if you have any other queries. We are always happy to assist you.

Regards,

Angelin Faith Sheeba.