Having trouble getting help?
Contact Support
Contact Support
Set the template to the Spinner
8 Dec 202415 minutes to read
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
setSpinnermethod 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>'});NOTE
You should set the template to the Spinner before creating the respective Essential® JS 2 component. Also,until we replace
setSpinnertemplate, 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
setSpinnermethod.
NOTE
In the below sample, we have rendered the Grid component with custom Spinner using
setSpinnermethod. You have to define the styles for the template in style section.
<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; }
}
}
}