We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to center SfDataGrid inside its parent control.

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>


7 Replies

KK Karthikraja Kalaimani Syncfusion Team April 25, 2023 11:26 AM UTC

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


TV Timo Vogel June 5, 2023 10:08 AM UTC

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



KK Karthikraja Kalaimani Syncfusion Team June 6, 2023 11:42 AM UTC

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 20th June 2023. We appreciate your patience until then. 




NY Nirmalkumar Yuvaraj Syncfusion Team June 21, 2023 11:14 AM UTC

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



NY Nirmalkumar Yuvaraj Syncfusion Team June 29, 2023 05:49 AM UTC

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.



TV Timo Vogel replied to Nirmalkumar Yuvaraj June 30, 2023 08:59 AM UTC

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



NY Nirmalkumar Yuvaraj Syncfusion Team June 30, 2023 10:01 AM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon