How to Set Column Header Style of Telerik RadDataGrid in XAML Based Windows Store Application

Learn more about Rad Controls for Windows 8 here .

RadDataGrid is a very important RadControl to create enterprise based Windows Store Applications. Currently I have been using RadDataGrid and you can read the previous two articles at the following links:

Part 1: Three Steps to work with RadDataGrid in XAML based Windows Store Application

Part 2: Working with Columns width in RadDataGrid in XAML based Windows Store Application

In this article we will have a look at setting the Column Header Style. You can set the column header style by configuring the value of:



To start, first you need to add the following references in the XAML:

xmlns:telerik="using:Telerik.UI.Xaml.Controls.Grid"
xmlns:telerikgridrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"

After adding the references, create the RadDataGrid as in the following. Ensure that the AutoGenerateColumns property is set to false. See:

<telerik:RadDataGrid
            x:Name="ProductGrid"
            AutoGenerateColumns="False"
            Width="500">
</telerik:RadDataGrid>

After this you need to manually create columns. Create RadDataGrid.Columns inside RadDataGrid.



After creating RadaDataGrid.Columns you need to create RadDataGrid.Columns. In columns you can set:

1. Header: Set the value of the header text
2. Width: The fixed width of the column
3. PropertyName: Set this to the property name of the business object you want to display in this column.

In DataGridTextColumn you need to set HeaderStyle. That can be done as in the following. In the following code we are setting:

1. Header Background
2. Header Fontstyle
3. Header Fontsize

So putting it all together you can create RadDataGrid with a customized column header as in the following:

<telerik:RadDataGrid

            x:Name="ProductGrid"

            AutoGenerateColumns="False"

            Width="500">

            <telerik:RadDataGrid.Columns>

 

                <telerik:DataGridTextColumn

                    PropertyName="ProductName"

                    Header="Name"

                    Width="200">

                    <telerik:DataGridTextColumn.HeaderStyle>

                        <Style

                            TargetType="telerikgridrimitives:DataGridColumnHeader">

                            <Setter Property="Background" Value="SaddleBrown"/>

                            <Setter Property="FontStyle" Value="Italic"/>

                            <Setter Property="FontSize" Value="20"/>

                        </Style>

                    </telerik:DataGridTextColumn.HeaderStyle>

                </telerik:DataGridTextColumn>

               

                <telerik:DataGridTextColumn

                   

                    PropertyName="ProductPrice"

                    Header="Price"

                    Width="50"/>

                <telerik:DataGridTextColumn

                    PropertyName="ProductType"

                    Header="Type"

                    Width="150"/>

                <telerik:DataGridTextColumn

                    PropertyName="InStock"

                    Header="In Stock"

                    Width="100">

                    <telerik:DataGridTextColumn.HeaderStyle>

                        <Style

                            TargetType="telerikgridrimitives:DataGridColumnHeader">

                            <Setter Property="Background" Value="Blue"/>

                            <Setter Property="FontStyle" Value="Oblique"/>

                            <Setter Property="FontSize" Value="20"/>

                        </Style>

                    </telerik:DataGridTextColumn.HeaderStyle>

                 </telerik:DataGridTextColumn>

 

            </telerik:RadDataGrid.Columns>

        </telerik:RadDataGrid>

On running the application you will get a RadDataGrid with styled column header as in the following:



In this article we used some of the discussion from the last article so we did not discuss binding and the Product class in the earlier part of this article. However for your reference find the definition of the business class Product below.
 

public class Product

{

    public string ProductName { get; set; }

    public double ProductPrice { get; set; }

    public string ProductType { get; set; }

    public bool InStock { get; set; }

}

ItemSource of RadDataGrid is set as below:
 

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    this.ProductGrid.ItemsSource = GetProducts();

}

The GetProducts() class is defined as below:
 

private List<Product> GetProducts()

{

    List<Product> lstProduct = new List<Product>

    {

        new Product

        {

            ProductName ="Pen",

            ProductPrice = 100,

            ProductType = "Education",

            InStock = true

        },

        new Product

        {

            ProductName ="Pencil",

            ProductPrice = 50,

            ProductType = "Education",

            InStock = false

        },

        new Product

        {

            ProductName ="Math Book",

            ProductPrice = 345,

            ProductType = "Education",

            InStock = true

        },

        new Product

        {

            ProductName ="Ball",

            ProductPrice = 23,

            ProductType = "Sports",

            InStock = true

        },

        new Product

        {

            ProductName ="Cricket Bat",

            ProductPrice = 560,

            ProductType = "Sports",

            InStock = true

        },

        new Product

        {

            ProductName ="Baseball Bat",

            ProductPrice = 550,

            ProductType = "Sports",

            InStock = false

        },

    };

    return lstProduct;

}

In this way you can work with a column header style. I hope you find this article useful. Thanks for reading.

Learn more about Rad Controls for Windows 8 here