How to center SfDataGrid inside its parent control.

[Nicholas]

I'm having an issue here. Unless I set WidthRequest ​to anything (something I don't want to do because I risk cutting out columns) ​for the SfDataGrid control I can't use HorizontalOptions="Center" ​to center the DataGrid control.

What am I doing wrong here?

This is the code I'm using:

<ScrollView BackgroundColor="#f1f5fb">

            <StackLayout

            Spacing="25"

            Padding="30,0">

                <syncfusion:SfDataGrid x:Name="dataGrid"

                               ItemsSource="{Binding OrderInfoCollection}"

                                       HorizontalOptions="Center"

                                       ColumnWidthMode="Auto"/>

            </StackLayout>

        </ScrollView>

[Karthikraja Kalaimani]

Hi Nicholas, 

You can achieve your requirement by setting the total column width value to WidthRequest of DataGrid on DataGrid's Loaded event as like as in the following code snippets. 

Code snippets : 

<ScrollView BackgroundColor="#f1f5fb">

        <StackLayout

            Spacing="25"

            Padding="30,0">

            <sfDatagrid:SfDataGrid x:Name="dataGrid"  Loaded="dataGrid_Loaded" MinimumWidthRequest="0"  ColumnWidthMode="Auto" ItemsSource="{Binding OrderInfoCollection}">

            </sfDatagrid:SfDataGrid>

        </StackLayout>

    </ScrollView>

  private async void dataGrid_Loaded(object sender, EventArgs e)

    {

        if (DeviceInfo.Platform != DevicePlatform.WinUI)

        {

            await Task.Delay(200);

            this.dataGrid.WidthRequest = (this.dataGrid.Children[0] as ScrollView).Content.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name == "ExtentWidth").GetValue((this.dataGrid.Children[0] as ScrollView).Content) as double? ?? 0;

        }

        else

        {

            this.dataGrid.WidthRequest = (this.dataGrid.Children[0] as ScrollView).Content.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name == "ExtentWidth").GetValue((this.dataGrid.Children[0] as ScrollView).Content) as double? ?? 0;

        }

    }

Regards,
Karthik Raja

[Timo Vogel]

Hi Syncfusion team,

I also had this issue and solved it by implementing the suggested workaround.

But in my opinion this should be the default behavior.

If you agree, it would be nice when this can be tracked as a bug so that it will be implemented in the upcoming releases.

Thanks and regards,

Timo Vogel

[Karthikraja Kalaimani]

We have logged bug report for the reported issue "DataGrid not aligned to center when HorizontalOptions set to Center and ColumnWidthMode is Auto for DataGrid". We will fix the issue and include the fix in our upcoming weekly nuget release which is scheduled on 20^th June 2023. We appreciate your patience until then. 

feedback link : DataGrid not aligned to center when HorizontalOptions set to Center and ColumnWidthMode is Auto for DataGrid in .NET MAUI | Feedback Portal (syncfusion.com)

[Nirmalkumar Yuvaraj]

Hi Nicholas, 

Due to the 2023 Volume 2 Main release, there is no weekly NuGet release this week. We have some technical difficulties and use cases that need to be ensured. We will include the changes in our upcoming weekly release, which is scheduled to be rolled out on June 27, 2023. We appreciate your patience and understanding in the meantime. 

Regards,

Nirmalkumar

[Nirmalkumar Yuvaraj]

We are glad to inform you that the fix has been included in our weekly NuGet release for the mentioned issue. Please update the Syncfusion.Maui.DataGrid package to version 22.1.36. 

https://www.nuget.org/packages/Syncfusion.Maui.DataGrid

We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you require any further assistance.

[Timo Vogel]

Hi Nirmalkumar,

it works. :-)
After I've update to version 22.1.36, the DataGrid is now centered in the parent control without implementing the 'OnLoaded' event.

Thanks for the quick fix.

Regards,

Timo Vogel

[Nirmalkumar Yuvaraj]

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.