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

Date Column

The DataGridDateColumn is used to represent DateTimeOffset objects.

Example

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

Example 1: Create Data model

public class Data 
{ 
    public string Event { get; set; } 
    public DateTimeOffset Date { 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 { Event = "Meeting", Date = new DateTimeOffset(2013, 3, 12, 14, 00, 0,new TimeSpan())}, 
        new Data { Event = "Lecture", Date = new DateTimeOffset(2013, 3, 12, 14, 30, 0,new TimeSpan())}, 
        new Data { Event = "Meeting", Date = new DateTimeOffset(2013, 3, 12, 15, 15, 0,new TimeSpan())}, 
        new Data { Event = "Conference", Date = new DateTimeOffset(2013, 3, 12, 16, 00, 0,new TimeSpan())} 
    }; 
}    
We have also 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"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridTextColumn PropertyName="Event" Header="Event"/> 
        <telerikGrid:DataGridDateColumn PropertyName="Date" Header="Date"/> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

Figure 1: Date Column

Date Column

Format

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

Here is a quick example:

Example 4: Defining in XAML

<telerikGrid:RadDataGrid UserEditMode="Inline" ItemsSource="{Binding}" AutoGenerateColumns="False"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridTextColumn PropertyName="Event" Header="Event"/> 
        <telerikGrid:DataGridDateColumn PropertyName="Date" Header="Date" CellContentFormat="{}{0:M}" /> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

Figure 2: Date Column Format

Date Column

In this article
Not finding the help you need?