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.
Unfortunately, activation email could not send to your email. Please try again.

How to format SfDataGrid rows and borders?

Thread ID:

Created:

Updated:

Platform:

Replies:

118391 Mar 4,2015 01:21 PM Mar 5,2015 04:54 AM WinRT 4
loading
Tags: SfDataGrid
Daniel Thompson
Asked On March 4, 2015 01:21 PM

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
Replied On March 4, 2015 11:32 PM

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
Replied On March 4, 2015 11:35 PM

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

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

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:

http://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 [Syncfusion]
Replied On March 5, 2015 04:54 AM

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

 


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.

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.

;