Search results

Css Customization in ASP.NET MVC Pivot Table control

Hiding Axis

The visibility of row, column, value and filter axis in Field List and Grouping Bar can be changed using custom CSS setting. To do so, please refer the code sample below:

Text Alignment

The alignment of text inside row headers, column headers, value cells and summary cells can be changed using custom CSS setting. To do so, please refer the code sample below:

Customize header, value and summary cell style

The elements in pivot table like header cell, value cell and summary cell style can be customized using built-in CSS names. To do so, please refer the code sample below:

razor
axis.cs
@Html.EJS().PivotView("PivotView").Height(300).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource)
 .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();
 })).ShowGroupingBar(true).ShowFieldList(true).Render()

 <style>
    .e-pivotview .e-headercell { 
      background-color: thistle !important; 
    } 

    .e-pivotview .e-rowsheader { 
      background-color: skyblue !important; 
    }

    .e-pivotview .e-summary:not(.e-gtot)  { 
      background-color: pink !important; 
    } 

    .e-pivotview .e-gtot  { 
      background-color: greenYellow !important; 
    } 

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

output