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

2 Aug 20233 minutes to read

The QueryCellInfo event in PivotViewGridSettings can be used to apply custom style to row and value cells, and the HeaderCellInfo event in PivotViewGridSettings 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.

@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotView").Height("300").DataSourceSettings(dataSourceSettings => dataSourceSettings.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).GridSettings(gridSettings => gridSettings.QueryCellInfo("querycell").HeaderCellInfo("headerCellInfo")).Render()
<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>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Apply custom style to pivot cells

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 PivotViewValueSortSettings property to any other delimiter instead of the default separator.