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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to format SfDataGrid rows and borders?

Thread ID:





118391 Mar 4,2015 06:21 PM UTC Mar 5,2015 09:54 AM UTC WinRT 4
Tags: SfDataGrid
Daniel Thompson
Asked On March 4, 2015 06:21 PM UTC


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)


manik narang
Replied On March 5, 2015 04:32 AM UTC

For Row styling 
add this accordingly 
 <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"/>
<syncfusion:SfDataGrid x:Name="datagrid"   CellStyle="{StaticResource cellstyle}">

manik narang
Replied On March 5, 2015 04:35 AM UTC

similarly for 3 rd question
add this in style
 <Setter Property="VerticalContentAlignment" Value="Center"/>

Jayapradha S [Syncfusion]
Replied On March 5, 2015 08:53 AM UTC

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:



        <Style TargetType="syncfusion:GridHeaderCellControl">

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


        <Style TargetType="syncfusion:GridCell">

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






Please refer the following KB document 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.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.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.





Jayapradha S [Syncfusion]
Replied On March 5, 2015 09:54 AM UTC

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"








                         ItemsSource="{Binding OrderDetails}">


                <Style TargetType="TextBlock">

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

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




                <syncfusion:GridTextColumn MappingName="CustomerID"  />

                <syncfusion:GridTextColumn MappingName="ProductName" />

                <syncfusion:GridCheckBoxColumn MappingName="IsClosed" />

                <syncfusion:GridTextColumn  MappingName="Freight"  />

                <syncfusion:GridDateTimeColumn MappingName="ShippedDate" />





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





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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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