This is a migrated thread and some comments may be shown as answers.
Styling of datagrid using resources or css
3 Answers 28 Views
This is a migrated thread and some comments may be shown as answers.
Ole
Top achievements
Rank 1
Ole asked on 04 Oct 2018, 03:28 PM

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 ?.

 

3 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 04 Oct 2018, 04:56 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ole
Top achievements
Rank 1
answered on 05 Oct 2018, 09:29 AM
So it is not possible to style multiple dataGrid:DataGridColumnHeaderStyle in one place ?. 
0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 05 Oct 2018, 03:09 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Ole
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Ole
Top achievements
Rank 1
Share this question
or