Removing or changing the border at the top of the SfDataGrid Control

Mark Hanner

Asked On April 7, 2019 09:52 PM UTC

There is a border line at the top of the SfDataGrid on Xamarin.Forms. I am attempting to either remove or change it's color so that it is not visible

This is not part of the outer container's padding or the grid's positioning as I am able to put other elements in this screen and no white line appears.
This is not part of the container's background, as I am able to change the background color of the container to something like orange and the white line still appears.
This is not the overridable GetGridLinesVisibility, as that only pertains to the rows and columns *inside* the SfDataGrid. (There is an old question in the forum that is similar to this question that was answered with this response, which is not relevant to this request.)

There does not seem to be anything in the documentation that refers to this attribute of the grid, but if it appears at all (and oddly, it's only at the top, not at the sides or bottom of the grid element), I'd expect there should be some way to control it, even if it's a workaround. Any help would be appreciated.

Reply | Reply with quote

Subburaj Pandian Veluchamy [Syncfusion]

Replied On April 8, 2019 09:31 AM UTC

Hi Mark,

Thank you contacting Syncfusion support.

We have checked the reported issue “Showing white border above the SfDataGrid” in Xamarin.Forms and we can able to replicate the issue from our side. We have tested the scenario by the following code,

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<sfgrid:SfDataGrid x:Name="dataGrid" Grid.Row="1" Padding="0"

ColumnSizer="Auto"

ItemsSource="{Binding OrdersInfo}">

</sfgrid:SfDataGrid>

</Grid>

Output Screenshot

Please check and confirm whether you’re also mentioning the same issue. Currently we are analyzing on this issue to provide workaround for the same. We will validate and update you details in two business days (April 10, 2019). We appreciate your patience until then.

Regards,
Subburaj Pandian V

Reply | Reply with quote

Mark Hanner

Replied On April 8, 2019 03:36 PM UTC

Yes, I have examples that use both a containing Grid as in your example as well as a Stack container, which was used to generate the screen shot I posted earlier.

<ContentPage.ToolbarItems>

</ContentPage.ToolbarItems>

<ContentPage.Content>

<sfdgrid:SfDataGrid x:Name="CompaniesDataGrid" ItemsSource="{Binding Items}" AutoGenerateColumns="False" GridTapped="OnItemSelected" Margin="0"/>

<sfbusy:SfBusyIndicator IsBusy="{Binding IsBusy}" IsVisible="{Binding IsBusy}" Margin="0" BackgroundColor="White" />

</StackLayout>

</ContentPage.Content>

The white line appears no matter what the BackgroundColor of the Stack is set to, or if there is any other element inserted above the grid.

Reply | Reply with quote

Subburaj Pandian Veluchamy [Syncfusion]

Replied On April 9, 2019 11:17 AM UTC

Hi Mark,

Thank you for the update.

We have analyzed and found that this issue “White is appeared above the DataGrid” in Xamarin.Forms reproduced in Xamarin.Forms Android and iOS not in UWP. It can resolved by setting the DataGrid background color same to hide this white. Please refer the following code snippet for reference.

<sfgrid:SfDataGrid x:Name="dataGrid" Grid.Row="0"BackgroundColor="Blue" Padding="0"

ColumnSizer="Auto"

ItemsSource="{Binding OrdersInfo}">

</sfgrid:SfDataGrid>

</Grid>

· If we define color like this then while bouncing the DataGrid (bounce scroll) blue color will be visible instead of white.

· If we define the rows and columns smaller than the DataGrid size, blue color will be applied in remaining space instead of white.

Please let us know whether the given solution meets your requirement.

Regards,
Subburaj Pandian V

Reply | Reply with quote

Mark Hanner

Replied On April 9, 2019 03:33 PM UTC

Changing the background color in this way sets the background color for the whole grid, and as you note, the scroll areas take on this color when exposed by scrolling. (Note that the "Grid.Row='0'" attribute in the tag does not seem to have any effect). This turns out to not be the right solution for most of our usages, but there is one to which it applies, so that was helpful.

Your inclusion of the "Padding='0'" though got us thinking and it turns out the correct workaround for the situation we are describing is:

<sfgrid:SfDataGrid .... Padding="0,-1,0,0" ... />

This completely suppresses that top row of pixels in the header, and does not show any of the background color, and this is what we needed.

Thanks for your help.

Reply | Reply with quote

Jagadeesan Pichaimuthu [Syncfusion]

Replied On April 10, 2019 01:27 PM UTC

Hi Mark,

Thanks for your update.

We checked the workaround which you have implemented and found the workaround “setting DataGrid top padding” is correct and it will work in all cases. You can stick on this is workaround because we incremented one pixel value while layout header row to make visible header view top border completely in view. And you have not defined border visibility hence you can stick on this workaround it will not cause any issue.

Please let us know if you need any further details on this.

Regards,

Jagadeesan

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
143844	Apr 7,2019 09:52 PM UTC	Apr 10,2019 01:27 PM UTC	Xamarin.Forms	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US