Kendo UI for Vue Data Grid Loading Indicator
The Data Grid has a built in Kendo UI for Vue Loader component that displays a loading indicator over the grid's content while data is being fetched. This feature helps users understand that data is still being processed rather than assuming the grid is empty or unresponsive.
Start Free Trial
Built-in Loading Indicator
To enable the built-in loading overlay, set the showLoader of the Grid to true.
The following example demonstrates how the built-in loader functions when data is being loaded:
Custom Loading Indicator
For more flexibility, the Kendo UI for Vue Data Grid also allows you to replace the default loader with a fully customizable loading indicator. This is particularly useful if you want to match the loading state with your application's design language or provide additional context while data is being retrieved.
To use a custom loading indicator, pass your custom component to the loader prop.
You can see a sample implementation of a custom loading indicator for the Grid in the Demo below.