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

SfDataGrid Styling

I'm trying to set TextAlignment, CurrencyGroupSizes in Currency Column

Here is my code

<Application x:Class="Application"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:eRetail"
    xmlns:sync="http://schemas.syncfusion.com/wpf"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Syncfusion.Shared.WPF;component/SkinManager/SkinManager.xaml"/>
                <ResourceDictionary Source="/Syncfusion.SfGrid.WPF;component/Styles/Styles.xaml"/>                                 (This is applied properly)
            </ResourceDictionary.MergedDictionaries>

            <Style TargetType="{x:Type sync:GridCurrencyColumn}">                                                                                          (This is not applied)
                <Setter Property="TextAlignment" Value="Right"/>
                <Setter Property="AllowGrouping" Value="True"/>
                <Setter Property="CurrencyGroupSeparator" Value=","/>
                <Setter Property="CurrencyGroupSizes">
                    <Setter.Value>3,2,2,2,2</Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="{x:Type sync:GridDateTimeColumn}">                                                                                          (This is not applied)
                <Setter Property="TextAlignment" Value="Center"/>
                <Setter Property="Pattern" Value="ShortDate"/>
                <Setter Property="CustomPattern" Value="dd-MM-yy"/>
            </Style>
            
        </ResourceDictionary>
    </Application.Resources>
</Application>

Can you please tell me what is wrong with my style

Thanks in advance
Amit Saraf

6 Replies

AR Antony Raj M Syncfusion Team March 9, 2016 06:56 PM UTC

Hi Amit,

We have analyzed your query and it is not possible to implement style for GridColumns. You have to set the values directly in the GridColumns as like in below code example.

<syncfusion:SfDataGrid x:Name="sfgrid"

                        AutoGenerateColumns="False"

                        ShowGroupDropArea="True"

                        ItemsSource="{Binding OrderList}">

        <syncfusion:SfDataGrid.Columns>

            <syncfusion:GridDateTimeColumn MappingName="OrderDate"

                                        TextAlignment="Center"

                                        Pattern="ShortDate"/>

            <syncfusion:GridCurrencyColumn MappingName="UnitPrice"

                                        TextAlignment="Right"

                                        CurrencyGroupSeparator=","

                                        CurrencyGroupSizes="3"

                                        AllowGrouping="True"/>
        </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>



When you are using SfDataGrid.AutoGenerateColumns as true, you have to use SfDataGrid.AutoGeneratingColumns event to initialize the required properties.


sfgrid.AutoGeneratingColumn += Sfgrid_AutoGeneratingColumn;



private void Sfgrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnArgs e)

{

    if(e.Column is GridCurrencyColumn)

    {

        var currencyColumn = e.Column as GridCurrencyColumn;

        currencyColumn.CurrencyDecimalSeparator = ",";

        currencyColumn.TextAlignment = TextAlignment.Center;

        currencyColumn.CurrencyGroupSizes = new Int32Collection() {3, 2};

    }
}


 For more information about GridColumns, please refer the before links.
http://help.syncfusion.com/wpf/sfdatagrid/columns
http://help.syncfusion.com/wpf/sfdatagrid/columns#defining-columns
http://help.syncfusion.com/wpf/sfdatagrid/column-types#gridcurrencycolumn
http://help.syncfusion.com/wpf/sfdatagrid/column-types#griddatetimecolumn

Please let us know if you require further assistance on this.

Regards,
Antony Raj



AS Amit Saraf March 10, 2016 05:40 AM UTC

Thanks for your reply

as per your suggestion, I removed styles for GridColumns from Application.xaml and modified my code as below

For GridDateTimeColumn

                    <sync:GridDateTimeColumn MappingName="AcFrom" HeaderText="From" Width="100" Pattern="LongDate" TextAlignment="Center"/>
                    <sync:GridDateTimeColumn MappingName="AcTill" HeaderText="Till" Width="100" Pattern="LongDate" TextAlignment="Center"/>

For GridCurrencyColumn

                <sync:GridCurrencyColumn MappingName="WRate" HeaderText="Wholesale Rate" Width="100" TextAlignment="Right" AllowGrouping="True">
                    <sync:GridCurrencyColumn.CurrencyGroupSeparator>3,2</sync:GridCurrencyColumn.CurrencyGroupSeparator>
                </sync:GridCurrencyColumn>
                <sync:GridCurrencyColumn MappingName="RRate" HeaderText="Retail Rate" Width="100" TextAlignment="Right" AllowGrouping="True">
                    <sync:GridCurrencyColumn.CurrencyGroupSeparator>3,2</sync:GridCurrencyColumn.CurrencyGroupSeparator>
                </sync:GridCurrencyColumn>

In above code Text marked with Bold are not having any effect on output

can you please let me know what is the problem with my code

Thanks in advance
Amit Saraf


SV Srinivasan Vasu Syncfusion Team March 10, 2016 12:45 PM UTC

Hi Amit,
We have analyzed your query and we have checked the TextAlignment and AllowGrouping property of GridColumns which is working fine from our side. You have to set Width more than the cell size to make effect on TextAlignment property. And you have to set CurrencyGroupSeperator with equal to operator as like the below code example.
XAML:

<syncfusion:SfDataGrid x:Name="grid"

                                         ItemsSource="{Binding OrderInfoCollection}"       

                                         AllowResizingColumns="True"

                                         ColumnSizer="Auto"
                                         ShowGroupDropArea="True">

         <syncfusion:SfDataGrid.Columns>

<syncfusion:GridCurrencyColumn MappingName="Note"

                                                         HeaderText="Retail Rate"

                                                         Width="300"

                                                        TextAlignment="Right"

                                                        CurrencyGroupSizes="3"

                                                        CurrencyGroupSeparator=","
                                                        AllowGrouping="True"/>

<syncfusion:GridDateTimeColumn MappingName="Date"

                                                          TextAlignment="Center"

                                                          HeaderText="Till"   

                                                          Width="100"
                                                          Pattern="LongDate" />


            </syncfusion:SfDataGrid.Columns>


</syncfusion:SfDataGrid>




We have prepared a sample as per your scenario and you can download the same from the below location,

Sample: http://www.syncfusion.com/downloads/support/forum/123321/ze/Samples-905390982
Please refer the below link to know more GridCurrencyColumn.
Link: http://help.syncfusion.com/wpf/sfdatagrid/column-types#gridcurrencycolumn

Regards,
Srinivasan




AS Amit Saraf March 10, 2016 01:53 PM UTC

Thanks for your reply

Changed code as per your suggestion and found Only TextAlignment is not working (every thing is aligned Left) 

Sample you supplied is working perfectly so I think there is something wrong in my project itself, So can you please tell me where to look for problem

Thanks in advance

Amit Saraf 


AS Amit Saraf replied to Amit Saraf March 11, 2016 05:35 AM UTC

Thanks for your reply

Changed code as per your suggestion and found Only TextAlignment is not working (every thing is aligned Left) 

Sample you supplied is working perfectly so I think there is something wrong in my project itself, So can you please tell me where to look for problem

Thanks in advance

Amit Saraf 

Figured out the problem

I had defined Style for TextBlock in Application.xaml

            <Style TargetType="{x:Type TextBlock}">
                <Setter Property="HorizontalAlignment" Value="Left"/>                                         <--- This Line was creating a problem --->
                <Setter Property="VerticalAlignment" Value="Center"/>
            </Style>

After replacing value by Stretch the problem was solved.

Thanks for your help

Amit Saraf


AP Ashwini Paranthaman Syncfusion Team March 11, 2016 09:57 AM UTC

Hi Amit,
We are glad that your issue has been fixed.
Please let us know if you need any other assistance.
Regards,
Ashwini P.

Loader.
Live Chat Icon For mobile
Up arrow icon