Loading animation in Vue Grid component
11 Jun 20245 minutes to read
The grid has an option to show a loading indicator in-between the time of fetching the data and binding it to the grid during initial rendering or refreshing or after performing any grid action like sorting, filtering, grouping, and more. The grid supports two indicator types, which is achieved by setting the loadingIndicator.indicatorType
property to Spinner or Shimmer. The default value of the indicator type is “Spinner.”
In the following sample, the Shimmer indicator is displayed while the grid is loading and refreshing when using the remote data.
<template>
<div id="app">
<ejs-grid :dataSource="data" :allowSorting='true' :allowFiltering='true' :allowPaging="true" :pageSettings='pageSettings' :loadingIndicator='loadingIndicator'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
<e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page, Sort, Filter } from "@syncfusion/ej2-vue-grids";
import { DataManager, ODataAdaptor } from "@syncfusion/ej2-data";
const data = new DataManager({
url: 'https://services.syncfusion.com/js/production/api/Orders/',
adaptor: new ODataAdaptor()
});
const pageSettings = { pageCount: 3 };
const loadingIndicator = { indicatorType: 'Shimmer' };
provide('grid', [Page, Sort, Filter]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
<template>
<div id="app">
<ejs-grid :dataSource="data" :allowSorting='true' :allowFiltering='true' :allowPaging="true" :pageSettings='pageSettings' :loadingIndicator='loadingIndicator'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
<e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Sort, Filter } from "@syncfusion/ej2-vue-grids";
import { DataManager, ODataAdaptor } from "@syncfusion/ej2-data";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: new DataManager({
url: 'https://services.syncfusion.com/js/production/api/Orders/',
adaptor: new ODataAdaptor()
}),
pageSettings: { pageCount: 3 },
loadingIndicator: { indicatorType: 'Shimmer' },
};
},
provide: {
grid: [Page, Sort, Filter]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>