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

[Mark Hanner]

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]

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"> 

            <Grid.RowDefinitions> 

                <RowDefinition Height=".3*"/> 

                <RowDefinition Height=".7*"/> 

            </Grid.RowDefinitions> 

            <Label Grid.Row="0" BackgroundColor="Blue"/> 

            <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  

[Mark Hanner]

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>

<ToolbarItem Text="Add" Clicked="AddItem_Clicked" />

</ContentPage.ToolbarItems>

<ContentPage.Content>

<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" />

</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.

[Subburaj Pandian Veluchamy]

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" 

                               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 

[Mark Hanner]

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]

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