Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (161).NET Core  (29).NET MAUI  (64)Angular  (74)ASP.NET  (50)ASP.NET Core  (79)ASP.NET MVC  (88)Azure  (36)Blazor  (153)DocIO  (23)Essential JS 2  (85)Essential Studio  (174)File Formats  (29)Flutter  (123)JavaScript  (187)Microsoft  (113)PDF  (67)React  (62)Succinctly series  (128)Syncfusion  (610)TypeScript  (31)Uno Platform  (3)UWP  (4)Vue  (39)Webinar  (35)Windows Forms  (59)WinUI  (52)WPF  (138)Xamarin  (155)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (5)Build conference  (6)Business intelligence  (54)Button  (4)C#  (120)Chart  (57)Cloud  (12)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (6)DataGrid  (55)Development  (400)Doc  (7)DockingManager  (1)eBook  (96)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (18)File Manager  (4)Gantt  (11)Gauge  (11)Git  (4)Grid  (28)HTML  (11)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (312)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (30)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (22)Solution Services  (3)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (92)UI  (224)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (23)Visual Studio Code  (17)Web  (375)What's new  (213)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing Skeleton Loading Indicator in Syncfusion Essential JS 2 DataGrid

Introducing Skeleton Loading Indicator in Syncfusion Essential JS 2 DataGrid

In modern UI design, most of us expect to show visual effects until the control is ready for user interaction. A skeleton effect shows a loading indicator in the shape of the content to be loaded in a control. In a grid, a skeleton effect would display rows and columns without any data.

From the 2022 Volume 3 release onward, Syncfusion’s Essential JS 2 DataGrid supports a skeleton loading indicator (shimmer effect) between fetching data from the server (or another service) and binding it to the grid during initial rendering, while refreshing, or after performing any grid actions like sorting, filtering, or grouping.

In this blog, we will see how to visualize the skeleton loading indicator for various features in our Essential JS 2 DataGrid.

Enable skeleton loading indicator in Syncfusion Essential JS 2 DataGrid

Syncfusion DataGrid supports both spinner and shimmer effects as loading indicators. In modern design, the shimmer effect is preferred over a spinner.

Both paginated and virtualization-enabled grids are used to visualize a huge volume of data without any performance degradation. Let’s see how to enable the shimmer effect for both paginated and virtualized grids in our Essential JS 2 DataGrid.

For paginated DataGrid

In a pagination-enabled DataGrid, we can enable the shimmer effect by setting the loadingIndicator property as Shimmer. The default value of loadingIndicator is Spinner. So, we have to define this property to use the shimmer effect.

This doesn’t mean that the shimmer effect will be shown for pagination alone. It can also be shown while performing other grid actions. The skeleton loading indicator will be shown to represent the grid content layout whenever the grid is waiting for content.

Refer to the following code example.

import { Grid, Page, Selection } from '@syncfusion/ej2-grids';
import { orderData } from './data-source'; // import your data source
 
Grid.Inject(Page);
 
let grid: Grid = new Grid(
{
  dataSource: orderData,
  allowPaging: true,
  loadingIndicator: { indicatorType: 'Shimmer' },
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
  ],
  pageSettings: { pageSize: 7 }
});
grid.appendTo('#Grid');
Skeleton Loading Indicator with Shimmer Effect in Paginated DataGrid

For virtualization-enabled DataGrid

In a virtualization-enabled DataGrid, instead of loading all the data, the data will load on demand while the user scrolls the DataGrid with the vertical scroll bar.

Syncfusion Essential JS 2 DataGrid allows you to show the skeleton shimmer effect while loading data on demand, and you can enable this feature by setting the enableVirtualMaskRow property value as true.

Refer to the following code example.

import { VirtualScroll, Grid, Edit, Toolbar } from '@syncfusion/ej2-grids';
import { orderData } from './data-source'; // import your data source
 
Grid.Inject(VirtualScroll);
 
let grid: Grid = new Grid(
{
  dataSource: orderData,
  enableVirtualization: true,
  height: 400,
  enableVirtualMaskRow:true,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
 
  ],
});
grid.appendTo('#Grid');
Skeleton Loading Indicator Support for Virtualization-Enabled DataGrid
Skeleton Loading Indicator Support for Virtualization-Enabled DataGrid

Other DataGrid features with skeleton loading indicator

Let’s see the shimmer effect in other features of the Essential JS 2 DataGrid.

Single column groupingShimmer effect support for single column grouping in Essential JS 2 Data Grid

Multiple column groupingShimmer effect support for multiple column grouping in Essential JS 2 DataGrid

Group caption aggregateShimmer effect support for group caption aggregate in Essential JS 2 DataGrid

Footer aggregateShimmer effect support for footer aggregate in Essential JS 2 DataGrid

Hierarchical DataGrid

Shimmer effect support for hierarchical DataGrid

Checkbox columnShimmer effect support for checkbox column in Essential JS 2 DataGrid

Checkbox filteringShimmer effect support for checkbox filtering in Essential JS 2 DataGrid

References

For more details, refer to our Syncfusion Essential JS 2 DataGrid documentation and demos.

Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the skeleton loading indicator (shimmer effect) in our Essential JS 2 DataGrid in the 2022 Volume 3 release. Try out this great feature and provide your feedback in the comments section below.

Also, check out our Release Notes and What’s New pages to see all the new updates in this release.

You can also contact us through our support forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top