You can format the number, date, and time values for each field using formatSettings
option under dataSourceSettings
. It can be configured through code behind, during initial rendering.
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 informatSettings
itself.
@Html.EJS().PivotView("PivotView").Width("100%").Height("300").DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource)
.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("Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).Render()
public ActionResult Index()
{
var data = GetPivotData();
ViewBag.DataSource = data;
return View();
}
This property is applicable only for relational data source.
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 informatSettings
itself.
@Html.EJS().PivotView("PivotView").Width("100%").Height("300").DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource)
.ExpandAll(false).EnableSorting(true)
.FormatSettings(formatsettings =>
{
formatsettings.Name("Year").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("Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).Render()
public ActionResult Index()
{
var data = GetPivotData();
ViewBag.DataSource = data;
return View();
}
As per Firefox and Edge browsers standards, most of the date and time formats used in data source aren’t supported. For example: Apr-2000, Apr-01-2000, 01-03-2000, 2000-Apr-01 etc… are not supported. Meanwhile ISO formats
will be supported across all browsers.