Working With Columns Width in RadDataGrid in XAML Based Windows Store Application

Learn more about Rad Controls for Windows 8 here.

In another article we learn how to work with RadDataGrid in three simple steps. In this article let us have a look at how to work with Columns in RadDataGrid. Before we procced to understand how to work with column widths and column headers, let us understand columns in RadDataGrid. There are two kinds of columns in RadDataGrid.



TextColumn renders each cell value as a System.String object whereas TemplateColumn renders as a DataTemplate. In this article we will focus our discussion on TextColumn. It inherits DataGridColumn.

It has the following important properties:

1. Header
2. HeaderStyle
3. SizeMode
4. Width
5. SortDirection

We will use a Product business object from the previous article. You will notice in the output of the last article that RadDataGrid columns had the default width. The width of columns was stretched to the maximum. We got output as in the following:



Now if you want to set the width of each column then you need to use the following procedure.
 
Ensure that the AutoGenerateColumns property is set to false.



Then you need to manually create columns. In column creation you need to set the width of the column. 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 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.

So putting it all together you can create a fixed width text column in RadDataGrid as in the following. We have XAML from a previous article. The modified XAML with a fixed column width is as in the following:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <telerik:RadDataGrid

            x:Name="ProductGrid"

            AutoGenerateColumns="False"

            Width="500">

            <telerik:RadDataGrid.Columns>

               

                <telerik:DataGridTextColumn

                    PropertyName="ProductName"

                    Header="Name"

                    Width="200"/>               

                <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:RadDataGrid.Columns>

        </telerik:RadDataGrid>

 

    </Grid>

On running the application you will get a RadDataGrid with a fixed column width as in the following:

Another important property of a column is SizeMode. This property can be set with one of the following three values:



In the last section we set the width of the columns. The following describes that.

1. The Width property takes effect only when SizeMode is set to Fixed.

2. If SizeMode is set to Auto then the column takes only the width that is required. It overrides the value of width.

3. If SizeMode is set to Strech then the column will override the width value and stretch it to all the available space.

In the following, even though we have set the width of the column, the column will only occupy the space required to display the items.




If you modify the RadDataGrid above with the setting SizeMode property of the fourth column as Auto then RadDataGrid will render 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 as 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; }
}

The ItemSource of RadDataGrid is set as in the following:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    this.ProductGrid.ItemsSource = GetProducts();
}

The GetProducts() class is defined as in the following:
 

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 column width. I hope you find this article useful. Thanks for reading.

Learn more about Rad Controls for Windows 8 here