The border of the SfDataGrid is not displayed

[andy feng]

Hi,

I'm using a SfDataGrid control, but I'm having an issue with borders not displaying properly.

I have added a layer of StackLayout outside the SfDataGrid. 

When I set the padding for StackLayout control, as you can see in the image, in the data grid on the bottom, the right border on the center cell is missing.

I tried to remove the padding for StackLayout control, as you can see in the image, in the data grid on the top, the border is displayed. The sample code has been uploaded to the attachment .

Do you have any suggestion for this issue?

Thanks

Attachment: DataGridSample_ff0b760e.zip

[Karthikraja Kalaimani]

Hi Andy,

We have checked the reported issue ”RightBorder missing on header cell of the center column” and we found a workaround to overcome this issue. Please refer to the below code snippet.

Code snippet :

 

  <StackLayout> 

        <StackLayout BackgroundColor="{StaticResource PageDefaultBackgroundColor}" Padding="0" Margin="0" Spacing="0" HeightRequest="{Binding EbayOrderDashboardCountHeightRequest}"> 

            <sfDataGrid:SfDataGrid  x:Name="dataGrid1"   

                    HeightRequest="{Binding EbayOrderDashboardCountHeightRequest}" 

                    BackgroundColor="White" 

                    ItemsSource="{Binding EbayOrderDashboardCountEntityCollection}" 

                    AllowLoadMore="False"  

                    IsBusy="True"  

                    AutoGenerateColumns="False" 

                    AllowPullToRefresh="False"  

                    VerticalOverScrollMode="None"  

                    HorizontalOptions="FillAndExpand"  

                    VerticalOptions="FillAndExpand"   

                    SelectionMode="Single"  

                    ColumnSizer="Star" 

                    HeaderRowHeight="{StaticResource ReportDataGridHeaderRowHeight}" 

                    RowHeight="{StaticResource ReportDataGridRowHeight}"> 

                <sfDataGrid:SfDataGrid.Columns x:TypeArguments="syncfusion:Columns"> 

                    <sfDataGrid:GridTextColumn   

                        HeaderText="Order"  

                        MappingName="Name"   

                        HeaderCellTextSize="{StaticResource DataGridHeaderCellTextSize}"  

                        CellTextSize="{StaticResource DataGridCellTextSize}"  

                        HeaderTextAlignment="End"  

                        TextAlignment="End" 

                        Padding="0,0,10,0"> 

                    </sfDataGrid:GridTextColumn> 

                    <sfDataGrid:GridTextColumn   

                        HeaderText="Today"   

                        MappingName="TodayCountFormat"   

                        HeaderCellTextSize="{StaticResource DataGridHeaderCellTextSize}"  

                        CellTextSize="{StaticResource DataGridCellTextSize}" 

                        HeaderTextAlignment="Start"   

                        TextAlignment="Start" 

                        Padding="10,0,0,0"> 

                    </sfDataGrid:GridTextColumn> 

                    <sfDataGrid:GridTextColumn   

                        HeaderText="Yesterday"   

                        MappingName="YesterdayCountFormat"   

                        HeaderCellTextSize="{StaticResource DataGridHeaderCellTextSize}"  

                        CellTextSize="{StaticResource DataGridCellTextSize}" 

                        HeaderTextAlignment="Start"   

                        TextAlignment="Start" 

                        Padding="10,0,0,0">    

                    </sfDataGrid:GridTextColumn> 

                    <sfDataGrid:GridTextColumn   

                        HeaderText="Anteayer"   

                        MappingName="BeforeYesterdayCountFormat"   

                        HeaderCellTextSize="{StaticResource DataGridHeaderCellTextSize}"  

                        CellTextSize="{StaticResource DataGridCellTextSize}" 

                        HeaderTextAlignment="Start"   

                        TextAlignment="Start" 

                        Padding="10,0,0,0"> 

                    </sfDataGrid:GridTextColumn> 

                    <sfDataGrid:GridTextColumn   

                        HeaderText="LastWeekToday"   

                        MappingName="SameDayLastWeekCountFormat"   

                        HeaderCellTextSize="{StaticResource DataGridHeaderCellTextSize}"  

                        CellTextSize="{StaticResource DataGridCellTextSize}" 

                        HeaderTextAlignment="Start" 

                        TextAlignment="Start" 

                        Padding="10,0,0,0"> 

                    </sfDataGrid:GridTextColumn> 

                </sfDataGrid:SfDataGrid.Columns> 

            </sfDataGrid:SfDataGrid> 

        </StackLayout> 

 

        <StackLayout BackgroundColor="{StaticResource PageDefaultBackgroundColor}" Padding="12" Margin="0" Spacing="0" HeightRequest="{Binding EbayOrderDashboardCountHeightRequest}"> 

            <sfDataGrid:SfDataGrid  x:Name="datagrid2"   

                    HeightRequest="{Binding EbayOrderDashboardCountHeightRequest}" 

                    BackgroundColor="White" 

                    ItemsSource="{Binding EbayOrderDashboardCountEntityCollection}" 

                    AllowLoadMore="False"  

                    IsBusy="True"  

                    AutoGenerateColumns="False" 

                    AllowPullToRefresh="False"  

                    VerticalOverScrollMode="None"  

                    HorizontalOptions="FillAndExpand"  

                    VerticalOptions="FillAndExpand"   

                    SelectionMode="Single"  

                    ColumnSizer="Star" 

                    HeaderRowHeight="{StaticResource ReportDataGridHeaderRowHeight}" 

                    RowHeight="{StaticResource ReportDataGridRowHeight}"> 

                <sfDataGrid:SfDataGrid.Columns x:TypeArguments="syncfusion:Columns"> 

                    <sfDataGrid:GridTextColumn   

                        HeaderText="Order"  

                        MappingName="Name"   

                        HeaderCellTextSize="{StaticResource DataGridHeaderCellTextSize}"  

                        CellTextSize="{StaticResource DataGridCellTextSize}"  

                        HeaderTextAlignment="End"  

                        TextAlignment="End" 

                        Padding="0,0,10,0"> 

                    </sfDataGrid:GridTextColumn> 

                    <sfDataGrid:GridTextColumn   

                        HeaderText="Today"   

                        MappingName="TodayCountFormat"   

                        HeaderCellTextSize="{StaticResource DataGridHeaderCellTextSize}"  

                        CellTextSize="{StaticResource DataGridCellTextSize}" 

                        HeaderTextAlignment="Start"   

                        TextAlignment="Start" 

                        Padding="10,0,0,0"> 

                    </sfDataGrid:GridTextColumn> 

                    <sfDataGrid:GridTextColumn   

                        HeaderText="Yesterday"   

                        MappingName="YesterdayCountFormat"   

                         

                        HeaderCellTextSize="{StaticResource DataGridHeaderCellTextSize}"  

                        CellTextSize="{StaticResource DataGridCellTextSize}" 

                        HeaderTextAlignment="Start"   

                        TextAlignment="Start" 

                        Padding="10,0,0,0"> 

                    </sfDataGrid:GridTextColumn> 

                    <sfDataGrid:GridTextColumn   

                        HeaderText="Anteayer"   

                        MappingName="BeforeYesterdayCountFormat"   

                        HeaderCellTextSize="{StaticResource DataGridHeaderCellTextSize}"  

                        CellTextSize="{StaticResource DataGridCellTextSize}" 

                        HeaderTextAlignment="Start"   

                        TextAlignment="Start" 

                        Padding="10,0,0,0"> 

                    </sfDataGrid:GridTextColumn> 

                    <sfDataGrid:GridTextColumn   

                        HeaderText="LastWeekToday"   

                        MappingName="SameDayLastWeekCountFormat"   

                        HeaderCellTextSize="{StaticResource DataGridHeaderCellTextSize}"  

                        CellTextSize="{StaticResource DataGridCellTextSize}" 

                        HeaderTextAlignment="Start" 

                        TextAlignment="Start" 

                        Padding="10,0,0,0"> 

                    </sfDataGrid:GridTextColumn> 

                </sfDataGrid:SfDataGrid.Columns> 

            </sfDataGrid:SfDataGrid> 

        </StackLayout>  

    </StackLayout>

….
public MainPage() 

        { 

            InitializeComponent(); 

 

            BindingContext = viewModel = new MainPageViewModel(); 

            this.datagrid2.GridLoaded += Datagrid2_GridLoaded; 

        } 

        private void Datagrid2_GridLoaded(object sender, Syncfusion.SfDataGrid.XForms.GridLoadedEventArgs e) 

        { 

            this.datagrid2.Columns[2].Width = this.datagrid2.Columns[2].ActualWidth - 0.2; 

        } 

We hope this helps, please let us know if you need further assistance from us.

Regards,
Karthik Raja 

[andy feng]

Hi Karthikraja,

Thank you for your reply. According to your solution, the right border on the center cell is displayed.

But in Android 10, as you can see in the image, a lot of the borders are missing. Root cause and solution are still under investigation.The sample code has been uploaded to the attachment.

Do you have any suggestion regarding to this?

Just FYI. In  Android 8  , as shown in the screenshot below:

In Android 10, as shown in the screenshot below.

Test  platform：

XiaoMi Android 8
SAMSUNG Android 10
Sony Android 10

Pixel 2 Android 10  (Android Emulator)

Nexus 6P Android 10  (Android Emulator)

xamarin version info：
Xamarin.Forms 4.8.0.1821
Syncfusion 18.4.0.31

Best Regards

Attachment: DataGridSample_3a45e536.zip

[Karthikraja Kalaimani]

Hi Andy,

Thanks for the update. This issue occurs because of screen resolution, So could you please check by changing the screen resolution of the device and let us know the details?.

Regards,
Karthik Raja

[andy feng]

Hi Karthikraja,

Thank you for your reply. I gathered some detailed information.

Borders are lost at the following resolutions:  2160x3840  2220x1080

Borders will be normal at the following resolutions : 1920x1080

I haven't tested the other resolutions yet. Do you have any suggestion regarding to this?

Best Regards

Andy

[Chandrasekar Sampathkumar]

Hi Andy, 

Thank you for the update. 

We have provided fix for this issue in version 18.2.0.47. Could you please check your sample with the mentioned version and revert us back. If the issue is not replicated, could you please share the SfDataGrid version for which you need patch. 

Regards, 

Chandrasekar Sampathkumar 

[andy feng]

Hi Chandrasekar,

Thank you for your reply. I used version 18.2.0.47 in the sample, this is OK,Border is not missing. I want to patch version 18.4.0.33 .Thank you very much.

Best Regards

Andy

[Chandrasekar Sampathkumar]

Hi Andy, 

Thank you for the update. 

We have created new incident (#310505) under your account to provide patch for this query. Please follow-up with the incident (310505) for further updates.  

Regards,
Chandrasekar Sampathkumar