Change the type of the Spinner

21 Dec 202210 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.

CSHTML

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Grid;

<div class="col-lg-12 control-section">
    <div class="e-sample-resize-container">
        @Html.EJ().Grid("ej2Grid").DataSource(ViewBag.datasource).Created("gridCreated").AllowPaging(true).Columns(new List<GridColumn> {
            new GridColumn { Field = "OrderID", HeaderText = "Order ID", Width = "120" },
            new GridColumn { Field = "CustomerID", HeaderText = "Customer Name", Width = "150" },
            new GridColumn { Field = "OrderDate", HeaderText = "Order Date", Width = "130", Format="yMd" },
            new GridColumn { Field = "Freight", HeaderText = "Freight", Width = "120" },
            new GridColumn { Field = "ShippedDate", HeaderText = "Shipped Date", Width = "140", Format="yMd" },
            new GridColumn { Field = "ShipCountry", HeaderText = "Ship Country", Width = "150" },
        }).Render()
    </div>
</div>

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

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

Type.cs

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