Customize number, date, and time values

26 Feb 20264 minutes to read

You can format the number, date, and time values for each field using the e-formatsettings option under e-datasourcesettings. This configuration is applied during component initialization to ensure consistent data presentation across the pivot table.

Number formatting

For numeric fields, the formatting settings include the following properties:

• name: Specifies the field name to which the formatting should be applied.
• format: Defines the number format pattern for the respective field (e.g., ‘N2’ for two decimal places, ‘C’ for currency).

Also, you can customize the applied number format by setting the numberFormatOptions options in e-formatsettings itself.

CSHTML

<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>

Number.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Date and time formatting

For date and time fields, the formatting settings include these properties:

• name: Specifies the field name to which the formatting should be applied.
• format: Defines the date/time format pattern for the respective field (e.g., ‘dd/MM/yyyy’, ‘MMM yyyy’).
• type: Specifies the format type to be used for the respective field (Date, Time, or DateTime).

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

CSHTML

<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>

Date.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Limitations of date formatting

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.