ASP.NET Core
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Css Customization in ASP.NET Core 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:

tagHelper
axis.cs
<ejs-pivotview id="PivotView" height="300" showGroupingBar="true" showFieldList="true">
    <e-datasourcesettings dataSource="@ViewBag.DataSource">
        <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>
</ejs-pivotview>

 <style>
    #PivotTable .e-group-columns {
      display: none;
    }
    #PivotTable .e-group-filters {
      height: 71px !important;
    }
    
    #PivotTable_PivotFieldList_Wrapper .e-field-list-columns{
      display: none;
    }
    #PivotTable_PivotFieldList_Wrapper .e-field-list-values{
      margin-top: 0px;
      height: 338px;
    }
    .e-pivotfieldlist-wrapper .e-values {
      height: 310px !important;
    }
    
    /* Hiding row axis in grouping bar */
    /* #PivotView .e-group-rows {
        display: none;
    } */
    
    /* Hiding row axis in field list */
    /* .e-pivotfieldlist-wrapper .e-field-list-rows {
        display: none;
    } */
    
    /* Hiding value axis in grouping bar */
    /* #PivotView .e-group-values {
        display: none;
    } */
    /* Hiding value axis in field list */
    /* .e-pivotfieldlist-wrapper .e-field-list-values {
        display: none;
    } */
    /* Hiding filter axis in grouping bar */
    /* #PivotView .e-group-filters {
        display: none;
    } */
    /* Hiding filter axis in field list */
    /* .e-pivotfieldlist-wrapper .e-field-list-filters {
        display: none;
    } */
 </style>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

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:

tagHelper
text-align.cs
<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource">
        <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>
</ejs-pivotview>

<style>
    .e-pivotview .e-valuescontent {
      text-align: center !important;
    }
    
    /* Column headers */
    /*.e-pivotview .e-columnsheader {
         text-align: center !important;
    }
    //Rows Headers
    .e-pivotview .e-rowsheader {
         text-align: center !important;
    }*/
    /* Summary Cells */
    /* .e-pivotview .e-summary {
         text-align: center !important;
    }*/
</style>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

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:

tagHelper
axis.cs
<ejs-pivotview id="PivotView" height="300" showGroupingBar="true" showFieldList="true">
    <e-datasourcesettings dataSource="@ViewBag.DataSource">
        <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>
</ejs-pivotview>

 <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

Previous
Next