Styling of datagrid using resources or css

4 posts, 1 answers
  1. Ole
    Ole avatar
    13 posts
    Member since:
    Aug 2018

    Posted 04 Oct 2018 Link to this post

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

     

  2.
  3. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 04 Oct 2018 Link to this post

    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
  5. Ole
    Ole avatar
    13 posts
    Member since:
    Aug 2018

    Posted 05 Oct 2018 in reply to Lance | Manager Technical Support Link to this post

    So it is not possible to style multiple dataGrid:DataGridColumnHeaderStyle in one place ?. 
  7. Answer
    Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 05 Oct 2018 Link to this post

    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
Back to Top