Styling of datagrid using resources or css

[Ole]

Hi,

 

How can I place the styling of DataGridColumnHeaderStyle and other styles in the data grid into resources, wheter that being in app.xaml ressources or in css.

What is best practice ?. Can I see some examples of this ?.

 

[Lance | Senior Manager Technical Support]

Hello Ole,

you can put an instance of that style in the App resources, for example:

<Application xmlns:dataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid" ...>
    <Application.Resources>
        <ResourceDictionary>
            <dataGrid:DataGridColumnHeaderStyle
                x:Key="MyColumnHeaderStyle"
                BackgroundColor="Transparent"
                FilterIndicatorFontAttributes="Bold"/>
        </ResourceDictionary>
    </Application.Resources>
</Application>

and then use it where you need to via StaticResource markup extension.

<dataGrid:RadDataGrid>
    <dataGrid:RadDataGrid.Columns>
        <dataGrid:DataGridDateColumn HeaderStyle="{StaticResource MyColumnHeaderStyle}"/>
    </dataGrid:RadDataGrid.Columns>
</dataGrid:RadDataGrid>

Important Note

Keep in mind that this resource is an instance of an object (a DataGridColumnHeaderStyle object) and not a template, so you can't reuse it across multiple columns at the same time. If you do need a style for multiple columns then you can use multiple style instances.

<Application xmlns:dataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid" ...>
    <Application.Resources>
        <ResourceDictionary>
            <dataGrid:DataGridColumnHeaderStyle
                x:Key="MyFirstColumnHeaderStyle"
                BackgroundColor="Transparent"
                FilterIndicatorFontAttributes="Bold"/>

<dataGrid:DataGridColumnHeaderStyle
                x:Key="MySecondColumnHeaderStyle"
                BackgroundColor="Transparent"
                FilterIndicatorFontAttributes="Bold"/>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<dataGrid:RadDataGrid>
    <dataGrid:RadDataGrid.Columns>
        <dataGrid:DataGridDateColumn HeaderStyle="{StaticResource MyFirstColumnHeaderStyle}"/>
        <dataGrid:DataGridDateColumn HeaderStyle="{StaticResource MySecondColumnHeaderStyle}"/>
    </dataGrid:RadDataGrid.Columns>
</dataGrid:RadDataGrid>

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Ole]

So it is not possible to style multiple dataGrid:DataGridColumnHeaderStyle in one place ?. 

[Lance | Senior Manager Technical Support]

Hi Ole,

If you wanted to use a single style definition for multiple columns, you can just reuse that key for many columns:

Lets say you have this in the App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <dataGrid:DataGridColumnHeaderStyle x:Key="EveryColumnHeaderStyle"
            BackgroundColor="DarkRed"
            BorderColor="IndianRed"
            BorderThickness="1,2,1,2"
            TextColor="White"
            IndicatorColor="White"
            OptionsButtonTextColor="White"
            FilterIndicatorTextColor="White"
            FilterIndicatorFontAttributes="Bold" />
    </ResourceDictionary>
</Application.Resources>

Then you can do this in the DataGrid:

<dataGrid:RadDataGrid x:Name="MyDataGrid" AutoGenerateColumns="False">
    <dataGrid:RadDataGrid.Columns>
        <dataGrid:DataGridTextColumn PropertyName="Name" HeaderStyle="{StaticResource EveryColumnHeaderStyle}" />
        <dataGrid:DataGridNumericalColumn PropertyName="Age" HeaderStyle="{StaticResource EveryColumnHeaderStyle}" />
        <dataGrid:DataGridDateColumn PropertyName="DateOfBirth" HeaderStyle="{StaticResource EveryColumnHeaderStyle}" />
    </dataGrid:RadDataGrid.Columns>
</dataGrid:RadDataGrid>

Here's the result at runtime:



Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik