Time Column

Updated on Mar 26, 2026

The TimeGridDateColumn represents TimeSpan objects.

Example

The following example shows how to generate a DataGridTimeColumn manually.

1. First, create the business object.

Create the Data Model

C#

public class Data
{
	public string Lecture { get; set; }
	public TimeSpan Time { get; set; }
}

1. The next step is to create some sample data.

Create the Sample Data

C#

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)}
	};
}

1. The example uses the PropertyName property to associate each column with the relevant property from the model.

Define in XAML

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>

Time Column

Format

You can use the CellContentFormat property to format the time and utilize any of the .NET Standard Date and Time Format Strings.

Apply Custom Format

XAML

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

Time Column with Custom Format