Update DataGrid after closing popup page in Net Maui

Ronald Rex 101 Reputation points

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 !!!

A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,989 questions
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,401 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 69,541 Reputation points Microsoft Vendor

    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;

    Here is my popup page PopPage.xaml.

    <?xml version="1.0" encoding="utf-8" ?>
    <toolkit:Popup  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            <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>
    </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()
       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.

0 additional answers

Sort by: Most helpful