Customizing loading indicator

2 Aug 20231 minute to read

You can customize the appearance of the loading indicator in the pivot table by using the spinnerTemplate property. This property accepts an HTML string which can be used for appearance customization.

NOTE

You can also disable the loading indicator by setting spinnerTemplate to empty string.

<ejs-pivotview id="PivotView" height="300" showFieldList="true">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" spinnerTemplate="<i class='fa fa-cog fa-spin fa-3x fa-fw'></i>" enableSorting="true" allowLabelFilter="true" allowValueFilter="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></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();
}