Articles → LIGHT SWITCH 2011 → Convert UTC To Local Date And Time In Datagrid In Lightswitch 2011

Convert UTC To Local Date And Time In Datagrid In Lightswitch 2011

Software Requirement

  1. Visual studio 2010 is installed on your machine.
  2. Visual Studio 2010 service pack 1 is installed on your machine.
  3. Microsoft Visual Studio Light switch 2011 is installed on your machine.

Prerequisite Knowledge

  1. Basics about lightswitch.
  2. How to create screens in lightswitch?
  3. How to create tables in lightswitch?
  4. What is ControlAvailable event in lightswitch?
  5. What are data templates in silverlight?
  6. What are converters (IValueConverter) in silverlight?

Steps Of Execution

  1. Create a new project
  2. Create new table
  3. Create new screens
  4. Add data to the screen
  5. Add new column in the grid

Create A New Project

Picture showing the sample lightswitch application
Click to Enlarge

Create New Table

Picture showing the table designer in lightswitch application
Click to Enlarge

Create A New Screen

Picture showing the project structure after adding screen and table
Click to Enlarge

Add Data To The Screen

Picture showing the editable data screen with data
Click to Enlarge

Add New Column In The Grid

using System;
using Microsoft.LightSwitch.Presentation;
using Microsoft.LightSwitch.Presentation.Extensions;
using System.Windows.Controls;
using System.Text;
using System.Windows.Controls.Primitives;
using System.Windows;
using System.Windows.Markup;
using System.Windows.Data;

namespace LightSwitchApplication {
  public partial class EditableUserProfilesGrid {
    partial void EditableUserProfilesGrid_Created() {
      // Write your code here.
      this.FindControl("grid").ControlAvailable += new EventHandler < ControlAvailableEventArgs > (EditableUserProfilesGrid_ControlAvailable);

    void EditableUserProfilesGrid_ControlAvailable(object sender, ControlAvailableEventArgs e) {
      if (e.Control is DataGrid) {
        DataGrid _grid = (DataGrid) e.Control;
        _grid.Columns.Insert(3, GetLocalTimeColumns("DOJ", "DOJ"));
    private DataGridColumn GetLocalTimeColumns(string headerName, string bindingColumnName) {
      //  Declaration
      StringBuilder sbDataGridHeader;
      StringBuilder sbDataGridCell;
      DataGridTemplateColumn column;

      //  Initialization
      sbDataGridHeader = new StringBuilder(string.Empty);
      sbDataGridCell = new StringBuilder(string.Empty);
      column = new DataGridTemplateColumn();

      //  Create data template for grid column
      sbDataGridHeader.Append(@"<DataTemplate xmlns=''>");
      sbDataGridHeader.Append(string.Format("<TextBlock Text='{0}'/>", headerName));

      //  Create data template for grid cell
      sbDataGridCell.Append(@"<DataTemplate xmlns=''");
      sbDataGridCell.Append(" xmlns:x=''");
      sbDataGridCell.Append(" xmlns:local='clr-namespace:LightSwitchApplication;assembly=convert_to_local_datetime_demo.Client;'>");

      sbDataGridCell.Append("<local:DateTimeUtc2LocalValueConverter x:Key='DateTimeUtc2LocalValueConverter' />");

      sbDataGridCell.Append("<TextBlock Text='{Binding ");
      sbDataGridCell.Append(", Converter={StaticResource DateTimeUtc2LocalValueConverter}}'/>");

      //  Assign data template to header
      Style headerStyle = new Style(typeof(DataGridColumnHeader));
      headerStyle.Setters.Add(new Setter {
        Property = DataGridColumnHeader.ContentTemplateProperty,
        Value = (DataTemplate) XamlReader.Load(sbDataGridHeader.ToString())
      column.HeaderStyle = headerStyle;

      //  Assign data template to grid cell
      column.CellTemplate = XamlReader.Load(sbDataGridCell.ToString()) as DataTemplate;

      //  Return value
      return column;

  public class DateTimeUtc2LocalValueConverter: IValueConverter {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
      return string.Format("{0} {1}", System.Convert.ToDateTime(value).ToLocalTime().ToShortDateString(), System.Convert.ToDateTime(value).ToLocalTime().ToLongTimeString());

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
      throw new NotImplementedException();

Code Explanation

  1. EditableUserProfilesGrid
  2. DateTimeUtc2LocalValueConverter

  1. EditableUserProfilesGrid_Created
  2. EditableUserProfilesGrid_ControlAvailable
  3. GetLocalTimeColumns

    <TextBlock  Text='DOJ'/>

            <local:DateTimeUtc2LocalValueConverter x:Key='DateTimeUtc2LocalValueConverter' />
        <TextBlock Text='{Binding DOJ, Converter={StaticResource DateTimeUtc2LocalValueConverter}}'/>


Picture showing the time in grid when timezone is UTC+05:30
Click to Enlarge

Picture showing the time in grid when timezone is UTC-12:00
Click to Enlarge

Picture showing the time in grid when timezone is UTC+13:00
Click to Enlarge

Posted By  -  Karan Gupta
Posted On  -  Friday, March 1, 2013


Your Email Id  
Query/FeedbackCharacters remaining 250