Hide specific columns in ASP.NET MVC Pivot Table Component

2 Aug 20231 minute to read

By using the ColumnRender event in the PivotViewGridSettings, you can hide specific column(s) in the pivot table. In the example below, the “Units Sold” column under “FY 2016” is hidden by setting its visible property to false via the ColumnRender event.

NOTE

The dot(.) character in FY 2016.Units Sold 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.

@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotView").Height("300").Width(650).DataSourceSettings(dataSourceSettings => dataSourceSettings.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).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.ColumnRender("columnRender")).Render()

<script>
    function columnRender(args) {
        for (var i = 1; i < args.columns.length; i++) {
            if (args.stackedColumns[i].customAttributes &&
                args.stackedColumns[i].customAttributes.cell.valueSort.levelName === 'FY 2016.Units Sold') {
                args.stackedColumns[i].visible = false;
            }
        }
    }

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

Hide specific columns in Pivot Table