I want to control the visibility of the total and sub-total. I want to be able to hide them if needed.
=====
TELERIK EDIT: It is possible to hide the Grand Total column and all Total rows with CSS. You can also hide only the non-Grand Total rows if you like.
<TelerikPivotGridContainer>
<TelerikPivotGridConfigurator />
<TelerikPivotGridConfiguratorButton />
<TelerikPivotGrid Data="@PivotData"
DataProviderType="@PivotGridDataProviderType.Local"
ColumnHeadersWidth="160px"
Class="no-headers">
<PivotGridColumns>
<PivotGridColumn Name="@nameof(PivotModel.Country)" Title="Country" />
<PivotGridColumn Name="@nameof(PivotModel.City)" Title="City" />
</PivotGridColumns>
<PivotGridRows>
<PivotGridRow Name="@nameof(PivotModel.Category)" Title="Category" />
<PivotGridRow Name="@nameof(PivotModel.Product)" Title="Product" />
</PivotGridRows>
<PivotGridMeasures>
<PivotGridMeasure Name="@nameof(PivotModel.ContractValue)"
Title="Contract Value"
Aggregate="@PivotGridAggregateType.Sum" />
</PivotGridMeasures>
</TelerikPivotGrid>
</TelerikPivotGridContainer>
<style>
/* Hide Grand Total column text. Remove cell paddings and borders. */
.k-pivotgrid-column-headers .k-pivotgrid-row:first-child .k-pivotgrid-header-total:last-child,
.k-pivotgrid-values .k-pivotgrid-header-total:last-child {
color: transparent;
font-size: 0;
padding: 0;
border-width: 0;
}
/* Shrink Grand Total column */
div.k-pivotgrid.no-headers .k-pivotgrid-column-headers col:last-child,
div.k-pivotgrid.no-headers .k-pivotgrid-values col:last-child {
width: 0 !important;
}
/* Hide Total row headers text */
/* Uncomment the not:() selector if you want to show back the Grand Total row. There must be no space before :not() */
div.k-pivotgrid.no-headers .k-pivotgrid-row-headers tr.k-pivotgrid-row:has(.k-pivotgrid-header-total)/*:not(:last-child)*/,
div.k-pivotgrid.no-headers .k-pivotgrid-values tr.k-pivotgrid-row:has(.k-pivotgrid-header-total:first-child)/*:not(:last-child)*/ {
font-size: 0;
color: transparent;
}
/* Remove Total headers cell paddings and borders */
/* Uncomment the not:() selector if you want to show back the Grand Total row. There must be no space before :not() */
div.k-pivotgrid.no-headers .k-pivotgrid-row-headers tr.k-pivotgrid-row:has(.k-pivotgrid-header-total)/*:not(:last-child)*/ th,
div.k-pivotgrid.no-headers .k-pivotgrid-values tr.k-pivotgrid-row:has(.k-pivotgrid-header-total:first-child)/*:not(:last-child)*/ td {
padding: 0;
border-width: 0;
}
</style>
@code {
private List<PivotModel> PivotData { get; set; } = new();
protected override void OnInitialized()
{
var dataItemCount = 100;
var categoryCount = 3;
var productCount = 10 + 1;
var countryCount = 2;
var cityCount = 4 + 1;
var rnd = Random.Shared;
for (int i = 1; i <= dataItemCount; i++)
{
var productNumber = Random.Shared.Next(1, productCount);
var categoryNumber = productNumber % categoryCount + 1;
var cityNumber = rnd.Next(1, cityCount);
var countryNumber = cityNumber % countryCount + 1;
PivotData.Add(new PivotModel()
{
Category = $"Category {categoryNumber}",
Product = $"Product {productNumber}",
Country = $"Country {countryNumber}",
City = $"City {cityNumber}",
ContractDate = DateTime.Now.AddDays(-rnd.Next(1, 31)).AddMonths(-rnd.Next(1, 12)).AddYears(-rnd.Next(0, 5)),
ContractValue = (productNumber == 3 || cityNumber == 2 || categoryNumber == 1) ? 0 : rnd.Next(123, 987)
});
}
base.OnInitialized();
}
public class PivotModel
{
public string Category { get; set; } = string.Empty;
public string Product { get; set; } = string.Empty;
public string Country { get; set; } = string.Empty;
public string City { get; set; } = string.Empty;
public DateTime ContractDate { get; set; }
public decimal ContractValue { get; set; }
}
}