Search results

Set the template to the Spinner

You can use custom templates on the Spinner instead of the default Spinner by specifying the template in the setSpinner method.

The following steps explains you on how to define template for Spinner.

  • Pass your custom template to the setSpinner method like as below.
// Specify the template content to be displayed in the Spinner

setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>'});

You should set the template to the Spinner before creating the respective Essential JS 2 component. Also,until we replace setSpinner template, the further Essential JS 2 component rendering is created with given template only.

  • Now, render the Essential JS 2 component. It’s render the Spinner with the template specified in the setSpinner method.

In the below sample, we have rendered the Grid component with custom Spinner using setSpinner method. You have to define the styles for the template in style section.

tagHelper
template.cs
<div class="control-section">
    <ejs-grid id="Grid1" dataSource="ViewBag.dataSource" allowPaging="true" created="grid1Created">
        <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>
    <br />
    <br />
    <br />
    <ejs-grid id="Grid2" dataSource="ViewBag.dataSource" allowPaging="true" created="grid2Created">
        <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 grid1Created() {
        var grid1 = document.getElementById("Grid1").ej2_instances[0];
        grid1.hideSpinner = () => true;
        ej.popups.setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>' });
    }

    function grid2Created() {
        var grid2 = document.getElementById("Grid2").ej2_instances[0];
        grid2.hideSpinner = () => true;
    }
</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;
    }

    @@keyframes custom-rolling {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
        }

        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    @@-webkit-keyframes custom-rolling {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
        }

        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    .custom-rolling {
        position: relative;
    }

        .custom-rolling div,
        .custom-rolling div:after {
            border: 16px solid #51CACC;
            border-radius: 50%;
            border-top-color: transparent;
            height: 160px;
            position: absolute;
            width: 160px;
        }

        .custom-rolling div {
            -webkit-animation: custom-rolling 1.3s linear infinite;
            animation: custom-rolling 1.3s linear infinite;
            top: 100px;
            left: 100px;
        }

            .custom-rolling div:after {
                -ms-transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
            }

    .custom-rolling {
        -webkit-transform: translate(-31px, -31px) scale(0.31) translate(31px, 31px);
        height: 62px !important;
        transform: translate(-31px, -31px) scale(0.31) translate(31px, 31px);
        width: 62px !important;
    }
</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<OrderDetails> order = new List<OrderDetails>();
        public IActionResult template()
        {
            if (order.Count() == 0)
                BindDataSource();                        
            ViewBag.datasource = order;
            return View();
        }

        public void BindDataSource()
        {
            int code = 10000;
            for (int i = 1; i < 10; i++)
            {
                order.Add(new OrderDetails(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"));
                order.Add(new OrderDetails(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"));
                order.Add(new OrderDetails(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"));
                order.Add(new OrderDetails(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"));
                order.Add(new OrderDetails(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 OrderDetails
        {
            public OrderDetails()
            {

            }
            public OrderDetails(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; }
        }
    }
}