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.
<ejs-pivotview id="PivotView" height="300">
<e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
<e-formatsettings>
<e-field name="Amount" format="C2" maximumSignificantDigits="3" minimumSignificantDigits="1" useGrouping="false"></e-field>
</e-formatsettings>
<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>
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.
<ejs-pivotview id="PivotView" height="300">
<e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
<e-formatsettings>
<e-field name="Year" format="dd/MM/yyyy-hh:mm" type="date"></e-field>
</e-formatsettings>
<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>
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.