Change the type of the Spinner

8 Dec 202410 minutes to read

By default, the Spinner is loaded in the applicable Essential® JS 2 component based on the theme imported into the page. Based on the theme, the type is set to the Spinner.
The available types are:

  • Material
  • Fabric
  • Bootstrap

You can change the Essential® JS 2 component spinner type by passing the type of the spinner as parameter to the setSpinner method like as below.

// Specify the type of the Spinner to be displayed

setSpinner({ type: 'Bootstrap'});

NOTE

After Essential® JS 2 component creation only, you can change the Essential® JS 2 component spinner type.

<div class="control-section">
    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true" created="gridCreated">
        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" width="120"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
            <e-grid-column field="OrderDate" headerText=" Order Date" format="yMd" width="130"></e-grid-column>
            <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>
            <e-grid-column field="ShippedDate" headerText="Shipped Date" format="yMd" width="140"></e-grid-column>
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>

<script type="text/javascript">
    function gridCreated() {
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.hideSpinner = () => true;
        ej.popups.setSpinner({ type: 'Bootstrap' });
    }
</script>

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        font-family: 'Helvetica Neue','calibiri';
        font-size: 14px;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }

    .wrap {
        margin: 0 auto;
        width: 240px;
    }

    h5 {
        font-weight: bold;
        text-align: center;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Grid;

namespace WebApplication1.Controllers
{
    public partial class SpinnerController : Controller
    {
        public static List<OrderDetailList> orders = new List<OrderDetailList>();
        public IActionResult type()
        {
            if (orders.Count() == 0)
                BindDataSources();
            ViewBag.datasource = order;
            return View();
        }

        public void BindDataSources()
        {
            int code = 10000;
            for (int i = 1; i < 10; i++)
            {
                orders.Add(new OrderDetailList(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
                orders.Add(new OrderDetailList(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
                orders.Add(new OrderDetailList(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
                orders.Add(new OrderDetailList(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
                orders.Add(new OrderDetailList(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
                code += 5;
            }
        }
        [Serializable]
        public class OrderDetailList
        {
            public OrderDetailList()
            {

            }
            public OrderDetailList(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
            {
                this.OrderID = OrderID;
                this.CustomerID = CustomerId;
                this.EmployeeID = EmployeeId;
                this.Freight = Freight;
                this.ShipCity = ShipCity;
                this.Verified = Verified;
                this.OrderDate = OrderDate;
                this.ShipName = ShipName;
                this.ShipCountry = ShipCountry;
                this.ShippedDate = ShippedDate;
                this.ShipAddress = ShipAddress;
            }

            public int? OrderID { get; set; }
            public string CustomerID { get; set; }
            public int? EmployeeID { get; set; }
            public double? Freight { get; set; }
            public string ShipCity { get; set; }
            public bool Verified { get; set; }
            public DateTime OrderDate { get; set; }
            public string ShipName { get; set; }
            public string ShipCountry { get; set; }
            public DateTime ShippedDate { get; set; }
            public string ShipAddress { get; set; }
        }
    }
}