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

How to remove the border on the Header?

Thread ID:

Created:

Updated:

Platform:

Replies:

129619 Mar 24,2017 12:51 PM Mar 28,2017 12:42 AM UWP 3
loading
Tags: SfDataGrid
Pierre-Christophe DUS
Asked On March 24, 2017 12:51 PM

Hello,

My customer would like to customize the SfDataGrid like this:
customer

I'm really close, but I don't see how to "remove" the border on the Header:
Result

My XAML looks like this:

<Page.Resources>
    <Style x:Key="customRowStyle" TargetType="grid:VirtualizingCellsControl">
        <Setter Property="Background" Value="#FFF2F2F2" />
    </Style>
    <Style TargetType="grid:GridCell">
        <Setter Property="BorderBrush" Value="White" />
    </Style>
    <Style TargetType="grid:HeaderRowControl">
        <Setter Property="BorderThickness" Value="0,0,0,0" />
        <Setter Property="BorderBrush" Value="Red" />
    </Style>
</Page.Resources>
...
<grid:SfDataGrid x:Name="sfDataGrid" Grid.Row="1"
Margin="0,0,0,16"
Padding="0,8,0,0"
ItemsSource="{Binding CarForms}"
BorderThickness="0,0,0,0"
RowStyle="{StaticResource customRowStyle}"
SelectedItem="{Binding SelectedForm, Mode=TwoWay}"
AutoGenerateColumns="False"
ColumnSizer="Star"
NavigationMode="Row"
HeaderRowHeight="50">


Is there something I ve forgotten?
How to remove the border on the Header row?

Regards,

Balamurugan Rajaraman [Syncfusion]
Replied On March 27, 2017 06:11 AM

Hi Pierre, 

Thank you or contact Syncfusion support. 

We have analyzed your query “How to remove the border of the SfDataGrid”. You can able to achieve your requirement by Binding the style for header row in to the HeaderStyle Property as like the below provided code sample. 

Code Snippet: 

<syncfusion:SfDataGrid ItemsSource="{Binding Orders}" 
                               RowStyle="{StaticResource customRowStyle}"  
                               HeaderStyle="{StaticResource headerStyle}"/> 

We have attached the modified sample for your reference in the below location.  


Please refer the below link to get more information about Styling the header row. 


Regards, 
Balamurugan R 


Pierre-Christophe DUS
Replied On March 27, 2017 08:16 AM

Thank you this works perfectly!

Regards,


Balamurugan Rajaraman [Syncfusion]
Replied On March 28, 2017 12:42 AM

Hi Pierre, 

Thank you for the update. 

Please let us know further assistance on this. 

Regards, 
Balamurugan R 


CONFIRMATION

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.

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.

;