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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





143844 Apr 7,2019 09:52 PM UTC Apr 10,2019 01:27 PM UTC Xamarin.Forms 5
Tags: SfDataGrid
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.

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 RowSpacing="0" BackgroundColor="Blue"> 
                <RowDefinition Height=".3*"/> 
                <RowDefinition Height=".7*"/> 
            <Label Grid.Row="0" BackgroundColor="Blue"/> 
            <sfgrid:SfDataGrid x:Name="dataGrid" Grid.Row="1" Padding="0" 
                               ItemsSource="{Binding OrdersInfo}"> 
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. 
Subburaj Pandian V 

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.

<ToolbarItem Text="Add" Clicked="AddItem_Clicked" />
<StackLayout BackgroundColor="White">
<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" />

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.

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. 
<Grid x:Name="grid"> 
            <Label Grid.Row="1" BackgroundColor="Blue" Text="Firt Row"TextColor="White"/> 
            <sfgrid:SfDataGrid x:Name="dataGrid" Grid.Row="0"BackgroundColor="Blue" Padding="0" 
                               ItemsSource="{Binding OrdersInfo}"> 
·       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. 
Subburaj Pandian V

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.

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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon