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.

SfDataGrid Styling

Thread ID:

Created:

Updated:

Platform:

Replies:

123321 Mar 8,2016 01:17 AM Mar 11,2016 04:57 AM WPF 6
loading
Tags: SfDataGrid
Amit Saraf
Asked On March 8, 2016 01:17 AM

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 [Syncfusion]
Replied On March 9, 2016 01:56 PM

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
Replied On March 10, 2016 12:40 AM

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 [Syncfusion]
Replied On March 10, 2016 07:45 AM

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
Replied On March 10, 2016 08:53 AM

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
Replied On March 11, 2016 12:35 AM

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 [Syncfusion]
Replied On March 11, 2016 04:57 AM

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

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.

;