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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to remove the border on the Header?

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 10:11 AM UTC

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 12:16 PM UTC

Thank you this works perfectly!

Regards,


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

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.

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

;