How to Show BusyIndicator When Loading MAUI DataGrid Inside PopUp?

In this article, we will show you how to show SfBusyIndicator when loading the .NET MAUI DataGrid inside the SfPopUp control.

xaml
The code below illustrates how to show SfBusyIndicator when loading a DataGrid inside the SfPopUp control.

<ContentPage.BindingContext>
    <local:EmployeeViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>

<StackLayout>
    <Button Text="Show PopUp"
            Clicked="ClickToShowPopup_Clicked" />
    <popup:SfPopup x:Name="popUp"
                   AutoSizeMode="Height"
                   HeaderTitle="SfDataGrid"
                   ShowFooter="True"
                   HeightRequest="500"
                   WidthRequest="400"
                   ShowCloseButton="True"
                   AcceptButtonText="ok"
                   Opened="popUp_Opened"
                   AppearanceMode="OneButton">
        <popup:SfPopup.PopupStyle>
            <popup:PopupStyle StrokeThickness="2"
                              CornerRadius="10" />
        </popup:SfPopup.PopupStyle>
        <popup:SfPopup.ContentTemplate>
            <DataTemplate>
                <Grid HeightRequest="550"
                      ChildAdded="Grid_ChildAdded">
                    <datagrid:SfDataGrid AutoGenerateColumnsMode="None"
                                         IsVisible="False"
                                         x:Name="dataGrid"
                                         Margin="0,10,0,10"
                                         HeightRequest="350"
                                         MaximumWidthRequest="380"
                                         SelectionMode="Single"
                                         NavigationMode="Cell"
                                         ColumnWidthMode="Auto"
                                         ItemsSource="{Binding Employees, Source={x:Reference viewModel}}">
                        <datagrid:SfDataGrid.Columns>
                            <datagrid:DataGridTextColumn HeaderText="Employee Name"
                                                         MappingName="Name" />
                            <datagrid:DataGridTextColumn  HeaderText="Contact ID"
                                                          MappingName="ContactID" />
                            <datagrid:DataGridTextColumn  HeaderText="Gender"
                                                          MappingName="Gender" />
                            <datagrid:DataGridTextColumn  HeaderText="Designation"
                                                          MappingName="Title" />
                        </datagrid:SfDataGrid.Columns>
                    </datagrid:SfDataGrid>

                    <inputLayout:SfBusyIndicator AnimationType="CircularMaterial"
                                                 x:Name="busyIndicator"
                                                 DurationFactor="2"
                                                 TitlePlacement="None"
                                                 WidthRequest="50"
                                                 HeightRequest="50"
                                                 IsRunning="True" />

                </Grid>
            </DataTemplate>
        </popup:SfPopup.ContentTemplate>
    </popup:SfPopup>
</StackLayout>

C#

public partial class MainPage : ContentPage
{
    SfDataGrid dataGrid;
    SfBusyIndicator busyIndicator;
    public MainPage()
    {
        InitializeComponent();
    }

    private async void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popUp.Show();
    }

    private void Grid_ChildAdded(object sender, ElementEventArgs e)
    {
        if (e.Element is SfDataGrid)
        {
            this.dataGrid = e.Element as SfDataGrid;
        }
        else if (e.Element is SfBusyIndicator)
        {
            this.busyIndicator = e.Element as SfBusyIndicator;
        }
    }

    private async void popUp_Opened(object sender, EventArgs e)
    {
        if (dataGrid != null)
        {
            await Task.Delay(2000);
            busyIndicator.IsRunning = false;
            dataGrid.IsVisible = true;
        }
    }
}

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to show a BusyIndicator when loading the .NET MAUI DataGrid inside a pop-up.

You can refer to our .NET MAUI DataGrid feature tour page to know about its other groundbreaking feature representations and Documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI DataGrid example to understand how to create and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!