Update DataGrid after closing popup page in Net Maui

Question

I have a View that contains a DataGrid populated using a viewmodel. I have button on the View that when the user presses it, it adds a record by opening a Popup page and allowing the user to enter the respective information for the new record. When the popup is closed or when the user presses Save, I would like to reload the DataGrid and it should display the preexisting data in the DataGrid along with the new record added. I was wondering how I would do this? Thanks !!!

Answer 1

Hello, I use .NET MAUI Community Toolkit pop up to do it.

I add command for button and binding Command in the Viewmodel. When you click the button, it will pop up a page that user could enter some items.

 <Button Text="ADD" Command="{Binding AddCommand}"></Button>

Here is myViewModel. I use ObservableCollection to contains data, it will update data at the runtime when you add data in it. After you get the data from the popup page, you can add it to the ObservableCollection

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Input;
using CommunityToolkit.Maui.Views;
namespace MauiDataGridPop
{
    public class MainViewModel
    {      
       public ObservableCollection<Team> Teams { get; set; }        
       public ICommand AddCommand { get; set; }
       public MainViewModel()
        {
            Teams = new ObservableCollection<Team>();
            for (int i = 0; i < 2; i++)
            {
                Teams.Add(new Team() { Conf = "conf"+i, Home = "Home"+i, Name = "Name"+i, Won = i,  });
            }
           AddCommand = new Command(CmdAdd);
        }
       private async void CmdAdd(object obj)
        {
            var popup = new PopPage();
           Team result = await Shell.Current.CurrentPage.ShowPopupAsync(popup) as Team;
           Teams.Add(result);
        }     
    }

Here is my popup page PopPage.xaml.

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MauiDataGridPop.PopPage"
            >
    <VerticalStackLayout>
        <Entry x:Name="myConfentry" Text="" Placeholder="Conf"></Entry>
        <Entry x:Name="myHome" Text="" Placeholder="Home"></Entry>
        <Entry x:Name="myWon" Text="" Placeholder="Won" Keyboard="Numeric"></Entry>
        <Entry  x:Name="myName" Text="" Placeholder="Name"></Entry>
        <Button Text="save" Clicked="Button_Clicked"></Button>
   </VerticalStackLayout>
</toolkit: Popup>

Here is popup page's background code PopPage.xaml.cs. When you click the save button, data will return back to the viewmodel.

using CommunityToolkit.Maui.Views;
namespace MauiDataGridPop;

public partial class PopPage : Popup
{
    public PopPage()
    {
        InitializeComponent();
    }
   private void Button_Clicked(object sender, EventArgs e) =>  Close( new Team() { Conf = myConfentry.Text , Home = myHome.Text , Name = myName.Text , Won =Int32.Parse(myWon.Text) });
   
}

Best Regards, Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.