Unwanted border line appears beside stacked header column in SfDataGrid

A visible vertical border line appears between a regular column header and an adjacent stacked header when using the SfDataGrid control. Is this a default rendering behavior when we have a non-stacked header next to a stacked header? I want to remove this vertical border line.

I attempted the following but I have found no solution to this behavior:

- Overriding GridColumn.HeaderStyle
- Assigning styles via the Resources of SfDataGrid


1 Reply

SB Sweatha Bharathi Syncfusion Team April 3, 2025 01:11 PM UTC

Hi Eric Nguyen ,

We have reviewed your query. By default, the vertical border will be rendered.. To achieve your requirement of removing the visible vertical border line between a regular column header and an adjacent stacked header, you can set the BorderThickness to 0 on the right side for GridStackedHeaderCellControl. 
We have provided a sample for your reference. Kindly review the sample and let us know if you have any concerns. If we have misunderstood your requirement, please provide an image or video reference to help us proceed further.


Code Snippet :

   <Window.Resources>
      <local:BorderThicknessConverter x:Key="BorderThicknessConverter" />
          <Style TargetType="syncfusion:GridStackedHeaderCellControl">
              <Setter Property="BorderThickness">
                  <Setter.Value>
                  <Binding Converter="{StaticResource BorderThicknessConverter}" />
              </Setter.Value>
              </Setter>
          </Style>
  </Window.Resources>

public class BorderThicknessConverter : IValueConverter
{
     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {
         var stackedColumn = value as StackedColumn;

         if(!MainWindow.lastColumn.Contains(stackedColumn.MappingName))
         {
             return new Thickness(0, 0, 0, 1);
         }
         return new Thickness(0, 0, 1, 1);

     }
   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
     {
         throw new NotImplementedException();
     }
}




Image Reference:







Regards,
Sweatha.B

Attachment: Sample_8adff4ae.zip

Loader.
Up arrow icon