Adding Grid to SfPopup

[Frederick Switzer]

I've added a Grid to the DataTemplate of my SfPopup Control, but I need to add the correct code-behind code to my StackLayout_ChildAdded method.

Here is my xaml snippet:

<sfPopup:SfPopup
        x:Name="sfPopup"
        HeaderHeight="72"
        HeaderTitle="Modal Window"
        HeightRequest="180"
        ShowCloseButton="True"
        StaysOpen="True"
        WidthRequest="312">
    <sfPopup:SfPopup.ContentTemplate>
        <DataTemplate>


            <StackLayout x:Name="stackLayout"


                    ChildAdded="StackLayout_ChildAdded">


                <sfGrid:SfDataGrid>
                    <sfGrid:SfDataGrid.Columns>
                        <syncfusion:DataGridNumericColumn
                            Width="50"
                            Format="0"
                            HeaderText="ID"
                            MappingName="pid" />


                        <sfGrid:DataGridTextColumn
                            Width="100"
                            HeaderText="FName"
                            MappingName="fname" />


                        <sfGrid:DataGridTextColumn
                            Width="100"
                            HeaderText="LName"
                            MappingName="lname" />
                    </sfGrid:SfDataGrid.Columns>
                </sfGrid:SfDataGrid>
            </StackLayout>
        </DataTemplate>
    </sfPopup:SfPopup.ContentTemplate>
</sfPopup:SfPopup>

I've added this code behind:

  private void ClickToShowPopup_Clicked(object sender, EventArgs e)
  {
      sfPopup.IsOpen = true;
      PatientRepository patientRepository = new PatientRepository();
      var patList = patientRepository.GetPatients();
      //Add the list of patients to the Grid Popup Control here
  }

What should my StackLayout_ChildAdded method look like?

[Suthi Yuvaraj]

Hi Frederick Switzer,

We have checked your requirement , you can access the item inside the StackLayout within the ChildAdded event. Please refer the below code snippet and documentation for more reference.

code snippet:

SfDataGrid grid;

private void StackLayout_ChildAdded(object sender, ElementEventArgs e)

  {

      if (e.Element is SfDataGrid)

      {

          grid = (SfDataGrid)e.Element;

  }

}

UG:https://support.syncfusion.com/kb/article/15317/how-to-access-a-named-listview-inside-a-xaml-datatemplate-in-net-maui-sflistview?isInternalRefresh=False

Additionally, we've observed that populating the DataGrid after setting IsOpen to true ensures the proper height measurement. Therefore, we recommend opening the popup after populating the item.Please let us know if you have any concern.

Regards,

Suthi Yuvaraj

[Frederick Switzer]

Thank you that populated the SfPopup with data from the grid , however, the DataTemplate was ignored.

Here is the code from the Data.Template

<DataTemplate>



             <StackLayout x:Name="stackLayout"


                     ChildAdded="StackLayout_ChildAdded">


                 <sfGrid:SfDataGrid>
                     <sfGrid:SfDataGrid.Columns>
                         <syncfusion:DataGridNumericColumn
                             Width="50"
                             Format="0"
                             HeaderText="ID"
                             MappingName="pid" />


                         <sfGrid:DataGridTextColumn
                             Width="100"
                             HeaderText="FName"
                             MappingName="fname" />


                         <sfGrid:DataGridTextColumn
                             Width="100"
                             HeaderText="LName"
                             MappingName="lname" />
                     </sfGrid:SfDataGrid.Columns>
                 </sfGrid:SfDataGrid>
             </StackLayout>
         </DataTemplate>
 
Here is my Stack_layout child added:
private void StackLayout_ChildAdded(object sender, ElementEventArgs e)
{
    if (e.Element is SfDataGrid)


    {
        grid = (SfDataGrid)e.Element;


        PatientRepository patientRepository = new PatientRepository();
        grid.ItemsSource = patientRepository.GetPatients();
    }
}

[Suthi Yuvaraj]

Frederick Switzer,

We have checked your requirement , we would like to let you know that when AutoGeneratedColumnsMode is True which is default value,  will generate the columns according to the collection bound to SfDataGrid, irrespective of the Columns defined in the sample. You can customize the columns by AutoGeneratedColumnsMode is False to manually create a columns. Please refer the below documentation for more reference.

UG Link:https://help.syncfusion.com/maui/datagrid/columns#manually-generate-columns