Apply custom style to pivot cells in ASP.NET CORE Pivot Table Component

2 Aug 20234 minutes to read

The queryCellInfo event in e-gridSettings can be used to apply custom style to row and value cells, and the headerCellInfo event in e-gridSettings can be used to apply custom styles to column cells.

In the following example, a custom style has been applied to the column header “Sold Amount” under “FY 2016” via the headerCellInfo event and to the row header “Germany” and its aggregated value via the queryCellInfo event by adding the “e-custom” class to the cell element.

CSHTML

<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
     <e-gridSettings columnWidth=120 queryCellInfo="queryCell" headerCellInfo="headerCellInfo"></e-gridSettings>
</ejs-pivotview>
<style>
    .e-custom {
        font-family: 'Courier New', Courier, monospace;
        font-size: 12px !important;
        background-color: pink !important;
    }
</style>
<script>
    function queryCell(args) {
         var colIndex = Number(args.cell.getAttribute('data-colindex'));
         var cells = args.data[colIndex] ? args.data[colIndex] : {};
         // Here by using 'actualText' option, a custom class can be added to the specific row header and its value to apply custom style.
         if (cells.actualText === 'Germany') {
              args.cell.classList.add('e-custom');
         } else if (cells.actualText === 'Amount' &&
              cells.columnHeaders === 'FY 2016' && cells.rowHeaders === 'Germany') {
              args.cell.classList.add('e-custom');
         }
    }
    function headerCellInfo(args) {
            var customAttributes = args.cell.column.customAttributes;
            // Here custom class can be added to the specific column header by using unique level name, to apply custom style.
            if (args.node.classList.contains('e-columnsheader') && customAttributes && 
                customAttributes.cell.valueSort.levelName === 'FY 2016.Sold Amount') {
                args.node.classList.add('e-custom');
            }
    }
</script>

CustomStyles.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

NOTE

The dot(.) character in FY 2016.Sold Amount is used by default to identify the header levels in the pivot table’s row and column. It can be changed by setting the headerDelimiter in the e-valuesortsettings property to any other delimiter instead of the default separator.