Grid row dividers not consistently shown

[Graham Lee]

Hi all,

I have a SfDataGrid configured in XAML like this:

            <sf:SfDataGrid x:Name="DataGrid"

                           AutoGenerateColumns="False"

                           AllowDraggingColumn="True"

                           AllowMultiSorting="True"

                           AllowSorting="True"

                           AllowTriStateSorting="True"

                           AllowResizingColumn="True"

                           CanUseViewFilter="True"

                           ColumnSizer="Auto"

                           GridTapped="OnSingleTapInGrid"

                           GridDoubleTapped="OnDoubleTapInGrid"

                           ItemsSource="{Binding Plants}"

                           ResizingMode="OnTouchUp"

                           VerticalOptions="FillAndExpand"

                           QueryColumnDragging="DataGrid_QueryColumnDragging">

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

                    <sf:GridSwitchColumn HeaderText="Selected"

                                         MappingName="Selected"/>

                </sf:SfDataGrid.Columns>

            </sf:SfDataGrid>

Additional columns are configured at runtime, they are all GridTextColumns. I have a situation where on my device the grid works fine, but when displaying the same data on a tester's device, there are dividing lines missing between some of the rows. The only clear difference is that the tester's device has a smaller screen so the longer fields like "Full Name" and "Locality Name" are fully squashed up against the edges of the columns, might that be interfering with the data grid's dividers? The missing lines aren't all adjacent to the squashed-up rows, though.

I've attached a screenshot from my device and a photo from the tester (apologies, the tester doesn't know how to take screenshots with their tablet).

Thanks,

Graham.

Attachment: sfdatagrid_7d0e688d.zip

[Karthikraja Kalaimani]

Hi Graham,

Can you please let us know the device density value of your testing device. It will help us to check the issue and provide you a better solution asap. 

Regards,
Karthik Raja

[Graham Lee]

Hi Karthik, thanks for following up.

The test device (which displays the problem) is Samsung Galaxy Tab S5E (SM-270), which is hdpi. The developer device (which doesn't display the problem) is Samsung Galaxy Tab A (SM-T590), which is xhdpi.

Thanks,

Graham.

[Karthikraja Kalaimani]

Hi Graham, 

Can you please refer the below document to get screen density value of your testing device. 

https://docs.microsoft.com/en-us/xamarin/essentials/device-display?tabs=android

Regards,
Karthik Raja

[Graham Lee]

Thank you Karthik, on the device that exhibits the problem the display density is 2.25. On the device without the issue, it's 1.5.

Graham.

[Ranjith Kumar Durairaj]

Hi Graham Lee

Based on device density, drawing a border of width 1(default value) will result in a border drawn for 2.25 pixels in your device. This results in that pixel being shared, for 0.25% for drawing border and the remaining 0.75% for the next view canvas.

So this phenomenon of pixel sharing happens in devices that has this decimal densities. Whereas devices with whole densities like 3,4 usually don't have these issues. So as to test the same, please try setting border width as 1.33 or 1.77 and test in your 2.25 density device

you can set border like this

        public DataGridPage()

        {

            InitializeComponent();

            this.DataGrid.GridSyle = new MyStyle

        }

 

        public class MyStyle:DataGridStyle

        {

           public override float GetBorderWidth()

           {

               return 1.33f;

           }

       }

Regards,
Ranjith Kumar