Template in React Spinner component
22 Mar 202318 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.
*Import the setSpinner
method from ej2-react-popups
library into your index.tsx
as shown in below.
```
import { setSpinner } from '@syncfusion/ej2-react-popups';
```
*Pass your custom template to the setSpinner
method like as below.
```ts
// 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 replacesetSpinner
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 inindex.html
.
[Class-component]
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { setSpinner } from '@syncfusion/ej2-react-popups';
import { data } from './datasource';
export default class App extends React.Component {
gridData = data.slice(0, 7);
onFirstGridCreated() {
this.hideSpinner = () => true;
// Specify the template content to be displayed in the Spinner
setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>' });
}
onSecondGridCreated() {
this.hideSpinner = () => true;
}
render() {
return (<div>
<GridComponent id='grid1' dataSource={this.gridData} created={this.onFirstGridCreated}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right'/>
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right'/>
</ColumnsDirective>
</GridComponent>
<br /><br /><br />
<GridComponent id='grid2' dataSource={this.gridData} created={this.onSecondGridCreated}>
<ColumnsDirective id='grid2' dataSource={this.gridData}>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right'/>
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right'/>
</ColumnsDirective>
</GridComponent>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { setSpinner } from '@syncfusion/ej2-react-popups';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
private gridData: Object[] = data.slice(0, 7);
public onFirstGridCreated(): void {
this.hideSpinner = () => true;
// Specify the template content to be displayed in the Spinner
setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>' });
}
public onSecondGridCreated(): void {
this.hideSpinner = () => true;
}
render() {
return (
<div>
<GridComponent id='grid1' dataSource={this.gridData} created={this.onFirstGridCreated}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right' />
</ColumnsDirective>
</GridComponent>
<br/><br/><br/>
<GridComponent id='grid2' dataSource={this.gridData} created={this.onSecondGridCreated}>
<ColumnsDirective id='grid2' dataSource={this.gridData}>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right' />
</ColumnsDirective>
</GridComponent>
</div>
);
}
}
[Functional-component]
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { setSpinner } from '@syncfusion/ej2-react-popups';
import { data } from './datasource';
function App() {
let gridData = data.slice(0, 7);
const [status, setStatus] = React.useState({ hideSpinner: true });
function onFirstGridCreated() {
setStatus({ hideSpinner: true });
// Specify the template content to be displayed in the Spinner
setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>' });
}
function onSecondGridCreated() {
setStatus({ hideSpinner: true });
}
return (<div>
<GridComponent id='grid1' dataSource={gridData} created={onFirstGridCreated}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right'/>
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right'/>
</ColumnsDirective>
</GridComponent>
<br /><br /><br />
<GridComponent id='grid2' dataSource={gridData} created={onSecondGridCreated}>
<ColumnsDirective id='grid2' dataSource={gridData}>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right'/>
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right'/>
</ColumnsDirective>
</GridComponent>
</div>);
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { setSpinner } from '@syncfusion/ej2-react-popups';
import { data } from './datasource';
function App() {
let gridData: Object[] = data.slice(0, 7);
const [status, setStatus] = React.useState({ hideSpinner: true });
function onFirstGridCreated(): void {
setStatus({ hideSpinner: true });
// Specify the template content to be displayed in the Spinner
setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>' });
}
function onSecondGridCreated(): void {
setStatus({ hideSpinner: true });
}
return (
<div>
<GridComponent id='grid1' dataSource={gridData} created={onFirstGridCreated}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right' />
</ColumnsDirective>
</GridComponent>
<br/><br/><br/>
<GridComponent id='grid2' dataSource={gridData} created={onSecondGridCreated}>
<ColumnsDirective id='grid2' dataSource={gridData}>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right' />
</ColumnsDirective>
</GridComponent>
</div>
);
}
export default App;