DataGrid Stacked header Rows columns duplicated

[Carl]

Hey

I  am using the Stacked Header Row feature and have implemented 2 stacked columns. The secondary column seems to duplicate the content of the first. 
Output:

Code: 

<?xml version="1.0" encoding="utf-8"?>

<ContentPage

  x:Class="LinkeD365.EnvManager.Pages.EnvSettingsPage"

  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

  xmlns:b="clr-namespace:LinkeD365.EnvManager.Helpers.Behaviours"

  xmlns:m="clr-namespace:LinkeD365.EnvManager.Models"

  xmlns:pm="clr-namespace:LinkeD365.EnvManager.PageModels"

  xmlns:sfg="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"

  xmlns:sfi="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"

  xmlns:tk="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

  Title="EnvSettingsPage"

  x:DataType="pm:EnvSettingsPageModel"

  Shell.NavBarIsVisible="False"

>

  <ContentPage.Resources>

    <ResourceDictionary>

      <tk:InvertedBoolConverter x:Key="InvertedBoolConverter" />

    </ResourceDictionary>

  </ContentPage.Resources>

  <Grid>

    <Label

      Grid.Column="0"

      Padding="5,2,0,0"

      BackgroundColor="{DynamicResource Foreground}"

      HeightRequest="100"

      HorizontalOptions="End"

      IsVisible="False"

      Text="Welcome to the Environment Manager. Use button above to connect & get started!"

      TextColor="{DynamicResource Background}"

      VerticalOptions="Start"

      WidthRequest="300"

    />

    <sfg:SfDataGrid

      x:Name="dataGrid"

      Grid.Row="3"

      Grid.ColumnSpan="4"

      AllowDeleting="False"

      AllowEditing="True"

      AllowResizingColumns="True"

      AutoGenerateColumnsMode="None"

      GridLinesVisibility="Both"

      ItemsSource="{Binding SettingsProps}"

      QueryRowHeight="DataGrid_QueryRowHeight"

      RowHeight="40"

      SelectionMode="Single"

    >

      <sfg:SfDataGrid.StackedHeaderRows>

        <sfg:DataGridStackedHeaderRow>

          <sfg:DataGridStackedHeaderRow.Columns>

            <sfg:DataGridStackedColumn ColumnMappingNames="First,Second">

              <sfg:DataGridStackedColumn.Template>

                <DataTemplate>

                  <Grid BackgroundColor="Pink">

                    <Label

                      Style="{StaticResource Title2}"

                      Text="Stacked Col 1"

                      HorizontalOptions="Center"

                      VerticalOptions="Center"

                    />

                  </Grid>

                </DataTemplate>

              </sfg:DataGridStackedColumn.Template>

            </sfg:DataGridStackedColumn>

            <sfg:DataGridStackedColumn ColumnMappingNames="Third,Fourth">

              <sfg:DataGridStackedColumn.Template>

                <DataTemplate>

                  <Grid>

                    <Label

                      Style="{StaticResource Title2}"

                      Text="Stacked Col 2"

                      HorizontalOptions="Center"

                      VerticalOptions="Center"

                    />

                  </Grid>

                </DataTemplate>

              </sfg:DataGridStackedColumn.Template>

            </sfg:DataGridStackedColumn>

          </sfg:DataGridStackedHeaderRow.Columns>

        </sfg:DataGridStackedHeaderRow>

      </sfg:SfDataGrid.StackedHeaderRows>

      <sfg:SfDataGrid.Columns>

        <sfg:DataGridTextColumn

          AllowEditing="False"

          ColumnWidthMode="Fill"

          HeaderText="First"

          MappingName="First"

        />

        <sfg:DataGridTextColumn

          AllowEditing="False"

          ColumnWidthMode="Fill"

          HeaderText="Second"

          MappingName="Second"

        />

        <sfg:DataGridTextColumn

          AllowEditing="False"

          ColumnWidthMode="Fill"

          HeaderText="Third"

          MappingName="Third"

        />

        <sfg:DataGridTextColumn

          AllowEditing="False"

          ColumnWidthMode="Fill"

          HeaderText="Fourth"

          MappingName="Fourth"

        />

      </sfg:SfDataGrid.Columns>

    </sfg:SfDataGrid>

  </Grid>

</ContentPage>

[Muthukumar Madasamy]

Hi Carl,

We’ve reviewed your query regarding the duplicated content in stacked header rows of the SfDataGrid.

To resolve this issue, please ensure that each DataGridStackedColumn includes a unique MappingName (e.g., "Group1", "Group2"). This helps the grid correctly identify and render each stacked header group without duplication.

Additionally, we’ve attached a simple sample and an output image for your reference.

Here’s a sample snippet:

<sfg:DataGridStackedColumn

    MappingName="Group1"

 ColumnMappingNames="First,Second">

    <!-- Template here -->

</sfg:DataGridStackedColumn>

<sfg:DataGridStackedColumn

    MappingName="Group2"

 ColumnMappingNames="Third,Fourth">

    <!-- Template here -->

</sfg:DataGridStackedColumn>

Best Regards,
Muthu Kumar Madasamy.

[Carl]

Thanks for taking the time and fixing my code, this works perfectly

[Muthukumar Madasamy]

Hi Carl,

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help.

Best Regards,

Muthu Kumar M.