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

StackedHeaderRows not working as expected


I have refer to your documentation of StackedHeaderRows sample, but i can't get this feature to work properly.

<sync:StackedColumn ChildColumns="PatientID, PatientName" HeaderText="Employee Details"/>

<sync:GridTextColumn HeaderText="Visit Date" MappingName="VisitDate" TextAlignment="Left" Width="100">
<sync:GridTextColumn HeaderText="Patient ID" MappingName="PatientID" TextAlignment="Left" Width="100">
<Border >
<TextBlock Padding="3,0,0,0" FontWeight="Regular" FontSize="13" Text="{Binding Path=ID}" VerticalAlignment="Center"/>
<sync:GridTextColumn HeaderText="Patient Name" MappingName="PatientName" TextAlignment="Left" Width="100">
<sync:GridTextColumn HeaderText="Diagnosis" MappingName="Diagnosis" TextAlignment="Left" Width="100">

My final grid look so weird that it has a line in between 2 rows. Please see the attached image.

I have not try the GroupName option, but do i need to specify the StackedHeaderRows if i'm using the GroupName option?

Attachment: Capture_3815dd8d.rar

1 Reply

GT Gnanasownthari Thirugnanam Syncfusion Team September 26, 2017 01:29 PM UTC

Hi BAO, 

On analyzing your given screenshot we suspect that you are applying style for GridHeaderCellControl and HeaderRowControl. But this is incorrect use case as per our control design so you need to write style for GridStackedHeaderCellControl and GridHeaderCellControl as like below code example. 

    <Style TargetType="syncfusion:GridStackedHeaderCellControl">             
       <Setter Property="BorderBrush" Value="SkyBlue"/> 
    <Style TargetType="syncfusion:GridHeaderCellControl"> 
       <Setter Property="BorderBrush" Value="SkyBlue"/> 

We have prepared the sample for same, you can download the same from below mentioned location. 

Sample location: 

Please refer the below UG link for more details about SfDataGrid control design. 

Please let us know if you have any further assistance on this. 

Gnanasownthari T. 

Live Chat Icon For mobile
Up arrow icon