The Telerik RadDataGrid is perfect for displaying lots of data on any size screen in your UWP app. There’s just a few little, not so obvious tricks and tips which isn’t covered in their documentation.

Working with Template Columns

Let’s say I have a data source and one of the fields is a phone number. What I want to do is display an icon of a phone in front of the number in my data grid cell and drop the phone number into a HyperlinkButton so that the user can press on it to call the number.

This is easy enough with a Template Column:

        <tGrid:RadDataGrid x:Name="grdTClients" AutoGenerateColumns="False">
           <tGrid:RadDataGrid.Columns>
                <tGrid:DataGridTemplateColumn Header="Phone">
                    <tGrid:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" MinWidth="200">
                                <SymbolIcon Symbol="Phone" Margin="5,0"/>
                                <HyperlinkButton Content="{Binding cntPhone}" 
                                   NavigateUri="{Binding cntPhone, ConverterParameter=tel:\{0:s\}, Converter={StaticResource StringFormatterValueConverter}}"
                                   />
                            </StackPanel>
                        </DataTemplate>
                    </tGrid:DataGridTemplateColumn.CellContentTemplate>
                </tGrid:DataGridTemplateColumn>
           </tGrid:RadDataGrid.Columns>
        </tGrid:RadDataGrid>

One of the great features of the RadDataGrid is the build in Filter, Sort and Grouping. When you use a template column though you also have to define which data field you want to use for sorting and grouping. Do this with a SortDescriptor and GroupDescriptor. Here’s the full code:

        <tGrid:RadDataGrid x:Name="grdTClients" AutoGenerateColumns="False">
           <tGrid:RadDataGrid.Columns>
                <tGrid:DataGridTemplateColumn Header="Phone">
                    <tGrid:DataGridTemplateColumn.SortDescriptor>
                        <tData:PropertySortDescriptor PropertyName="cntPhone"></tData:PropertySortDescriptor>
                    </tGrid:DataGridTemplateColumn.SortDescriptor>
                    <tGrid:DataGridTemplateColumn.GroupDescriptor>
                        <tData:PropertyGroupDescriptor PropertyName="cntPhone"></tData:PropertyGroupDescriptor>
                    </tGrid:DataGridTemplateColumn.GroupDescriptor>
                    <tGrid:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" MinWidth="200">
                                <SymbolIcon Symbol="Phone" Margin="5,0"/>
                                <HyperlinkButton Content="{Binding cntPhone}" 
                                   NavigateUri="{Binding cntPhone, ConverterParameter=tel:\{0:s\}, Converter={StaticResource StringFormatterValueConverter}}"
                                   />
                            </StackPanel>
                        </DataTemplate>
                    </tGrid:DataGridTemplateColumn.CellContentTemplate>
                </tGrid:DataGridTemplateColumn>
           </tGrid:RadDataGrid.Columns>
        </tGrid:RadDataGrid>

Make sure you reference the correct namespaces:

xmlns:tGrid="using:Telerik.UI.Xaml.Controls.Grid"
xmlns:tData="using:Telerik.Data.Core"

Styling Columns

You can use the Template Column or Conditional Styling to create your own layout inside the cell but sometimes you just want to do something simple like align the content to the right without the overhead and workload of defining a template. Do this by overriding the style of the cell itself. This code aligns the content to the center both horizontally and vertically:

                <tGrid:DataGridNumericalColumn Header="Tax Rate" PropertyName="TaxRate">
                    <tGrid:DataGridTextColumn.CellContentStyle>
                        <Style TargetType="TextBlock">
                            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
                            <Setter Property="VerticalAlignment" Value="Center"></Setter>
                        </Style>
                    </tGrid:DataGridTextColumn.CellContentStyle>
                </tGrid:DataGridNumericalColumn>