Search results

Customize number, date, and time values in ASP.NET MVC Pivot Grid control

21 Oct 2021 / 1 minute to read

You can format the number, date, and time values for each field using formatSettings option under dataSource. It can be configured through code behind, during initial rendering.

Number formatting

For numbers, the formatting settings required to apply through code behind are:

  • name: It allows to set the field name.
  • format: It allows to set the format of the respective field.

Also, you can customize the applied number format by setting the NumberFormatOptions options in formatSettings itself.

razor
Number.cs
Copied to clipboard
@Html.EJS().PivotView("PivotGrid").Width("100%").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data)
.ExpandAll(false).EnableSorting(true)
.FormatSettings(formatsettings =>
{
formatsettings.Name("Amount").Format("C2").MaximumSignificantDigits(3).MinimumSignificantDigits(1).UseGrouping(false).Add();
}).Rows(rows =>
{
rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).Render()
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Date and time formatting

For date and time, the formatting settings required to apply through code behind are:

  • name: It allows to set the field name.
  • format: It allows to set the format of the respective field.
  • type: It allows to set the type of format to be used for the respective field.

Also, you can customize the applied date format by setting DateFormatOptions options in formatSettings itself.

razor
Date.cs
Copied to clipboard
@Html.EJS().PivotView("PivotGrid").Width("100%").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data)
.ExpandAll(false).EnableSorting(true)
.FormatSettings(formatsettings =>
{
formatsettings.Name("Sold").Format("dd/MM/yyyy-hh:mm").Type("date").Add();
}).Rows(rows =>
{
rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).Render()
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}