SfDataGrid Styling

[Amit Saraf]

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

[Antony Raj M]

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

[Amit Saraf]

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

[Srinivasan Vasu]

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

[Amit Saraf]

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 

[Amit Saraf]

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

[Ashwini Paranthaman]

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