How to format SfDataGrid rows and borders?

[Daniel Thompson]

Hi,

I have three questions for the following SfDataGrid:

Question 1 - how to change the color of the column border lines?

Question 2 - how to change the color of the row border lines?

Question 3 - how to cause text to be vertically centered in the cell? (in screenshot it is vertically aligned at top)

Thanks,

Daniel

[manik narang]

For Row styling 

add this accordingly 

<Page

.

.

.

 xmlns:syncfusion="using:Syncfusion.UI.Xaml.Grid"/>

<Page.Resources>

 <Style x:Key="cellstyle" TargetType="syncfusion:GridCell">

            <Setter Property="FontSize" Value="25"/>

            <Setter Property="BorderBrush" Value="Black"/>

            <Setter Property="Height" Value="Auto"/>

            <Setter Property="Width" Value="Auto"/>

        </Style>

</Page.Resources>

<syncfusion:SfDataGrid x:Name="datagrid"   CellStyle="{StaticResource cellstyle}">

[manik narang]

similarly for 3 rd question

add this in style

 <Setter Property="VerticalContentAlignment" Value="Center"/>

[Jayapradha S]

Hi Daniel,

 

Thank you for using Syncfusion products.

 

We have analyzed your requirement and you can achieve this using BorderBrush property of GridCell and GridHeaderCellControl as shown in the following code snippet:

 

Code Snippet:

  <Page.Resources>

     

        <Style TargetType="syncfusion:GridHeaderCellControl">

            <Setter Property="BorderBrush" Value="Red"/>      

        </Style>

        <Style TargetType="syncfusion:GridCell">

            <Setter Property="BorderBrush" Value="Red"/>

        </Style>

      

   </Page.Resources>

 

 

Please refer the following KB document to change the Grid line color:

https://www.syncfusion.com/kb/2576/how-to-change-the-grid-line-color

 

At present, we don’t have the direct support to change the text alignment of GridCell and we will provide the provision to change the GridCell and GridHeaderCell text alignment by using HorizontalContentAlignment and VerticalContentAlignment properties in our upcoming main release 2015 Vol1 which will be available by the end of March, 2015.

 

But you can achieve this by customizing the renderer and set the content alignment which you have desired as shown in the following code snippet:

 

Code Snippet:

 

public MainPage()

        {

            this.InitializeComponent();

            this.sfDataGrid.CellRenderers.Remove("TextBox");

            this.sfDataGrid.CellRenderers.Add("TextBox", new CustomTextBoxRenderer());

        }

 

public class CustomTextBoxRenderer:GridCellTextBoxRenderer

    {

        public override void OnInitializeDisplayElement(Syncfusion.UI.Xaml.ScrollAxis.RowColumnIndex rowColumnIndex, TextBlock uiElement, GridColumn column, object dataContext)

        {

            base.OnInitializeDisplayElement(rowColumnIndex, uiElement, column, dataContext);

           uiElement.VerticalAlignment=VerticalAlignment.Center;

           uiElement.HorizontalAlignment = HorizontalAlignment.Center;

        }

   }

 

 

Please find the sample to change the column and row border lines and content alignment from the following location:

 

Sample Link: GridCellStyle.zip

 

Please let us know if you require further assistance.

 

Regards,

Jayapradha

 

[Jayapradha S]

Hi Daniel,

 

In our previous update, we have suggested to align the text in GridCell by overriding the GridCellTextBoxRenderer. Also, you can achieve this by styling the TextBlock in SfDataGrid instead of overriding the renderer as shown in the below code snippet,

 

Code Snippet:

 

   <syncfusion:SfDataGrid x:Name="sfDataGrid"

                         AddNewRowPosition="Top"

                         AllowEditing="True"

                         AllowGrouping="True"

                         ColumnSizer="Star"

                         AllowResizingColumns="True"

                         AllowResizingHiddenColumns="True"

                         AutoGenerateColumns="False"  

                         ItemsSource="{Binding OrderDetails}">

            <syncfusion:SfDataGrid.Resources>

                <Style TargetType="TextBlock">

                    <Setter Property="HorizontalAlignment" Value="Center"/>

                    <Setter Property="VerticalAlignment" Value="Center"/>

                </Style>               

            </syncfusion:SfDataGrid.Resources>

            <syncfusion:SfDataGrid.Columns>

                <syncfusion:GridTextColumn MappingName="CustomerID"  />

                <syncfusion:GridTextColumn MappingName="ProductName" />

                <syncfusion:GridCheckBoxColumn MappingName="IsClosed" />

                <syncfusion:GridTextColumn  MappingName="Freight"  />

                <syncfusion:GridDateTimeColumn MappingName="ShippedDate" />

            </syncfusion:SfDataGrid.Columns>          

        </syncfusion:SfDataGrid>

               

 

Kindly let us know if you need any further assistance on this.

 

Regards,
Jayapradha

 

[Qasim Raza]

Is there a way to define the color for the SeparatorBrush between GridHeaderCellControl?

[Mohanram Anbukkarasu]

Hi Qasim, 

Thanks for contacting Syncfusion support. 

SfDataGrid doesn’t have any direct property as SeparatorColor and SeparatorVisibility. We are currently working on this with high priority to find the feasibility to achieve this requirement. We will update you with details on October 8, 2019. We appreciate your patience until then. 

Regards, 

Mohanram A. 

[Mohanram Anbukkarasu]

Hi Qasim, 

Thanks for your patience.  

As we stated before SfDataGrid doesn’t have any direct properties as SeparatorColor and SeparatorVisibility. However you can achieve this requirement by writing style of TargetType GridHeaderCellControl as given the following code example. 

Code example :  

 

Please find the code example to change the separator color below. 

<Style x:Key="headerStyleSeparatorColor" TargetType="{x:Type syncfusion:GridHeaderCellControl}"> 

            <Setter Property="Background" Value="Transparent" /> 

            <Setter Property="BorderBrush" Value="Gray" /> 

            <Setter Property="BorderThickness" Value="0,0,0,1" /> 

            <Setter Property="HorizontalContentAlignment" Value="Center" /> 

            <Setter Property="Padding" Value="5,0,0,0" /> 

            <Setter Property="Foreground" Value="Gray" /> 

            <Setter Property="FontSize" Value="14" /> 

            <Setter Property="FontWeight" Value="Normal" /> 

            <Setter Property="IsTabStop" Value="False" /> 

            <Setter Property="syncfusion:VisualContainer.WantsMouseInput" Value="True" /> 

            <Setter Property="VerticalContentAlignment" Value="Center" /> 

            <Setter Property="Template"> 

                <Setter.Value> 

                    <ControlTemplate TargetType="{x:Type syncfusion:GridHeaderCellControl}"> 

                        <Grid> 

                            <VisualStateManager.VisualStateGroups> 

                                <VisualStateGroup x:Name="HiddenColumnsResizingStates"> 

                                    <VisualState x:Name="PreviousColumnHidden"> 

                                        <Storyboard> 

                                            <ThicknessAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_HeaderCellBorder" 

                                                <EasingThicknessKeyFrame KeyTime="0" Value="3, 0, 1, 1" /> 

                                            </ThicknessAnimationUsingKeyFrames> 

                                        </Storyboard> 

                                    </VisualState> 

 

                                    <VisualState x:Name="HiddenState"> 

                                        <Storyboard> 

                                            <ThicknessAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_HeaderCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                                <EasingThicknessKeyFrame KeyTime="0" Value="3, 0, 3, 1" /> 

                                            </ThicknessAnimationUsingKeyFrames> 

                                        </Storyboard> 

                                    </VisualState> 

                                    <!--  VisualState name changed from Normal to NormalState as Normal state is used for providing MouseOver effect  --> 

                                    <VisualState x:Name="NormalState" /> 

 

                                    <VisualState x:Name="LastColumnHidden"> 

                                        <Storyboard> 

                                            <ThicknessAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_HeaderCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                                <EasingThicknessKeyFrame KeyTime="0" Value="0, 0, 3, 1" /> 

                                            </ThicknessAnimationUsingKeyFrames> 

                                        </Storyboard> 

                                    </VisualState> 

                                </VisualStateGroup> 

                                <VisualStateGroup x:Name="CommonStates"> 

                                    <VisualState x:Name="MouseOver" /> 

                                    <VisualState x:Name="Normal" /> 

                                </VisualStateGroup> 

                                <VisualStateGroup x:Name="BorderStates"> 

                                    <VisualState x:Name="NormalCell" /> 

                                    <VisualState x:Name="FrozenColumnCell"/> 

                                    <VisualState x:Name="FooterColumnCell"> 

                                        <Storyboard BeginTime="0"> 

                                            <ThicknessAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_FooterCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                                <EasingThicknessKeyFrame KeyTime="0" Value="1,0,1,1" /> 

                                            </ThicknessAnimationUsingKeyFrames> 

                                        </Storyboard> 

                                    </VisualState> 

                                    <VisualState x:Name="BeforeFooterColumnCell"> 

                                        <Storyboard BeginTime="0"> 

                                            <ThicknessAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_FooterCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                                <EasingThicknessKeyFrame KeyTime="0" Value="0,0,0,1" /> 

                                            </ThicknessAnimationUsingKeyFrames> 

                                            <ThicknessAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_HeaderCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                                <EasingThicknessKeyFrame KeyTime="0" Value="0,0,0,1" /> 

                                            </ThicknessAnimationUsingKeyFrames> 

                                        </Storyboard> 

                                    </VisualState> 

                                </VisualStateGroup> 

                            </VisualStateManager.VisualStateGroups> 

                            <Border x:Name="PART_FooterCellBorder" 

                                BorderBrush="{TemplateBinding BorderBrush}" /> 

                            <Border x:Name="PART_HeaderCellBorder" 

                                Background="{TemplateBinding Background}" 

                                BorderBrush="{TemplateBinding BorderBrush}" 

                                BorderThickness="{TemplateBinding BorderThickness}" 

                                SnapsToDevicePixels="True"> 

                                <Grid Margin="{TemplateBinding Padding}" SnapsToDevicePixels="True"> 

                                    <Grid.ColumnDefinitions> 

                                        <ColumnDefinition Width="*" /> 

                                        <ColumnDefinition Width="Auto" /> 

                                        <ColumnDefinition Width="Auto" /> 

                                        <ColumnDefinition Width="1" /> 

                                    </Grid.ColumnDefinitions> 

 

                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 

                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 

                                                  Focusable="False" /> 

 

                                    <Border x:Name="PART_FilterPopUpPresenter" /> 

 

                                    <Grid x:Name="PART_SortButtonPresenter" 

                                      Grid.Column="1" 

                                      SnapsToDevicePixels="True"> 

                                        <Grid.ColumnDefinitions> 

                                            <ColumnDefinition Width="0" MinWidth="{Binding Path=SortDirection, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource sortDirectionToWidthConverter}}" /> 

                                            <ColumnDefinition Width="*" /> 

                                        </Grid.ColumnDefinitions> 

 

                                        <Path Width="8.938" 

                                          Height="8.138" 

                                          HorizontalAlignment="Center" 

                                          VerticalAlignment="Center" 

                                          Data="F1M753.644,-13.0589L753.736,-12.9639 753.557,-12.7816 732.137,8.63641 732.137,29.7119 756.445,5.40851 764.094,-2.24384 764.275,-2.42352 771.834,5.1286 796.137,29.4372 796.137,8.36163 774.722,-13.0589 764.181,-23.5967 753.644,-13.0589z" 

                                          Fill="Gray" 

                                          SnapsToDevicePixels="True" 

                                          Stretch="Fill" 

                                          Visibility="{Binding Path=SortDirection, 

                                                               RelativeSource={RelativeSource TemplatedParent}, 

                                                               ConverterParameter=Ascending, 

                                                               Converter={StaticResource sortDirectionToVisibilityConverter}}"> 

                                            <Path.RenderTransform> 

                                                <TransformGroup> 

                                                    <TransformGroup.Children> 

                                                        <RotateTransform Angle="0" /> 

                                                        <ScaleTransform ScaleX="1" ScaleY="1" /> 

                                                    </TransformGroup.Children> 

                                                </TransformGroup> 

                                            </Path.RenderTransform> 

                                        </Path> 

 

                                        <Path Width="8.938" 

                                          Height="8.138" 

                                          HorizontalAlignment="Center" 

                                          VerticalAlignment="Center" 

                                          Data="F1M181.297,177.841L181.205,177.746 181.385,177.563 202.804,156.146 202.804,135.07 178.497,159.373 170.847,167.026 170.666,167.205 163.107,159.653 138.804,135.345 138.804,156.42 160.219,177.841 170.76,188.379 181.297,177.841z" 

                                          Fill="Gray" 

                                          SnapsToDevicePixels="True" 

                                          Stretch="Fill" 

                                          Visibility="{Binding Path=SortDirection, 

                                                               RelativeSource={RelativeSource TemplatedParent}, 

                                                               ConverterParameter=Decending, 

                                                               Converter={StaticResource sortDirectionToVisibilityConverter}}"> 

                                            <Path.RenderTransform> 

                                                <TransformGroup> 

                                                    <TransformGroup.Children> 

                                                        <RotateTransform Angle="0" /> 

                                                        <ScaleTransform ScaleX="1" ScaleY="1" /> 

                                                    </TransformGroup.Children> 

                                                </TransformGroup> 

                                            </Path.RenderTransform> 

                                        </Path> 

 

                                        <TextBlock Grid.Column="1" 

                                               Margin="0,-4,0,0" 

                                               VerticalAlignment="Center" 

                                               FontSize="10" 

                                               Foreground="{TemplateBinding Foreground}" 

                                               SnapsToDevicePixels="True" 

                                               Text="{TemplateBinding SortNumber}" 

                                               Visibility="{TemplateBinding SortNumberVisibility}" /> 

                                    </Grid> 

 

                                    <syncfusion:FilterToggleButton x:Name="PART_FilterToggleButton" 

                                                          Grid.Column="2" 

                                                          HorizontalAlignment="Stretch" 

                                                          VerticalAlignment="Stretch" 

                                                          SnapsToDevicePixels="True" 

                                                          Visibility="{TemplateBinding FilterIconVisiblity}" /> 

                                    <GridSplitter Background="Red" Grid.Column="3" Width="1" IsEnabled="False"/> 

­                                </Grid> 

                            </Border> 

 

                        </Grid> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

 

 

<syncfusion:SfDataGrid x:Name="sfGrid"  

                       HeaderStyle="{StaticResource headerStyleSeparatorColor}" 

                       ColumnSizer="Star" 

                       ItemsSource="{Binding EmployeeDetails}" /> 

Please find the code example to change Separator visibility below. 

 

<Style x:Key="headerStyleSeparatorVisibility" TargetType="syncfusion:GridHeaderCellControl"> 

    <Setter Property="BorderThickness" Value="0,0,0,1"/> 

</Style> 

 

<syncfusion:SfDataGrid x:Name="sfGrid"  

                       HeaderStyle="{StaticResource headerStyleSeparatorVisibility}" 

                       ColumnSizer="Star" 

                       ItemsSource="{Binding EmployeeDetails}" /> 

 

 

We have created a simple sample using the above code example and it is available in the following link for your reference. 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeaderCellControl_Separator-921824032  

 

Please let us know if your need further assistance from us. 

Regards, 

Mohanram A.