New to Telerik UI for WinUI? Download free 30-day trial

Time Column

The TimeGridDateColumn is used to represent TimeSpan objects.

Example

The following example shows how to generate DataGridTimeColumn manually. First we need to create our business object.

Example 1: Create Data model

public class Data 
{ 
    public string Lecture { get; set; } 
    public TimeSpan Time { get; set; } 
} 
The next step is to create sample data.

Example 2: Create Sample Data

public MainPage() 
{ 
    this.InitializeComponent();  
    this.DataContext = new List<Data>() 
    { 
        new Data { Lecture = "Biology", Time = new TimeSpan(5, 20, 0,0)}, 
        new Data { Lecture = "Physics", Time = new TimeSpan(6, 30, 20)}, 
        new Data { Lecture = "Literature", Time = new TimeSpan(7, 35, 20)}, 
        new Data { Lecture = "Math", Time = new TimeSpan(5, 0, 0)} 
    }; 
}    
We have used the PropertyName property to associate each column with the relevant property from our model.

Example 3: Defining in XAML

<telerikGrid:RadDataGrid UserEditMode="Inline" ItemsSource="{Binding}" AutoGenerateColumns="False" Height="350" Width="400"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridTextColumn PropertyName="Lecture" Header="Lecture"/> 
        <telerikGrid:DataGridTimeColumn PropertyName="Time" Header="Start"/> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

Figure 1: Time Column

Time Column

Format

You could use CellContentFormat to format the time using any of the .NET Standard Date and Time Format Strings.

Example 4: Custom Format

<telerikGrid:RadDataGrid UserEditMode="Inline" ItemsSource="{Binding}" AutoGenerateColumns="False" Height="250" Width="400"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridTextColumn PropertyName="Lecture" Header="Lecture"/> 
        <telerikGrid:DataGridTimeColumn PropertyName="Time" Header="Start" CellContentFormat="{}{0:T}" /> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

Figure 2: Time Column with Custom Format

Time Column

In this article
Not finding the help you need?