How to display an animation while loading the data in the SfDataGrid?

1 min read

An animation can be displayed when loading a SfDataGrid by adding an ActivityIndicator inside the layout containing SfDataGrid in the GridLoaded event.

Refer the below code example in which an activity indicator is used to display an animation when the grid is loaded.

<Grid x:Name="grid"
          HorizontalOptions="FillAndExpand"
          VerticalOptions="FillAndExpand">
 
    <sfGrid:SfDataGrid x:Name="dataGrid"
                                   AutoGenerateColumns="True"
                                   ColumnSizer="Star"
                                   GridLoaded="DataGrid_GridLoaded"
                                   ItemsSource="{Binding OrdersInfo}">
    </sfGrid:SfDataGrid>
</Grid>

private async void DataGrid_GridLoaded(object sender, GridLoadedEventArgs e)
{
    ActivityIndicator indicator = new ActivityIndicator();
    indicator.IsRunning = true;
    indicator.IsVisible = true;
    indicator.Color = Color.Black;
    grid.Children.Add(indicator);
    await Task.Delay(3000);
    indicator.IsRunning = false;
    indicator.IsVisible = false;
    viewModel.SetRowstoGenerate(100);
}

Screenshot

$C:\Users\pavithra.sivakumar\AppData\Local\Microsoft\Windows\INetCacheContent.Word\load.png$