Dispalying Local DateTime in RadGrid

[Caleb]

I've seen multiple questions related to this but still haven't seen a good answer.

Dates on the backend are in UTC, I want the front end to display them on the Clients Local timezone. However, the Client is displaying the UTC time.

I understand this is related to the way browsers handle dates, but my confusion is with what exactly happens  when you "bind" a DateTime object to a RadGrid. I've even tried binding an ISO formatted Date string to a GridDateTimeColumn to see if that resolved the issue (it didn't).

When I say "new Date(theText)" in JS I get the correct value, but it apparently doesn't bind like this. I've even tried using DateTimeOffset instead of DateTime.

The data is being bound on the Server Side NeedDataSource event.

What is the current best solution to this problem? Must I either take the users offset and convert on binding or convert the front end text using JavaScipt? OR is there a cover all solution to just convert ALL dates to client local?

Thanks

[Attila Antal]

Hi Caleb,

When you bind DateTime values to RadGrid it will display them in the browser based on your ASP.NET Application's Culture using the default Standard date and time format strings. To change the application culture, see How to: Set the Culture and UI Culture for ASP.NET Web Page Globalization

 

Example Culture: en-US

protected void Page_Init(object sender, EventArgs e)
{
    System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
    System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("en-US");
}

Result

 

Example Culture: de-DE

protected void Page_Init(object sender, EventArgs e)
{
    System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("de-DE");
    System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("de-DE");
}

 

Result

 

However, you can customize that if you like.

If you use a Template Column: format the DateTime object value to make it "ISO 8601" compliant using the .ToString() method of the DateTime object.

<telerik:GridTemplateColumn UniqueName="MyCol" HeaderText="Custom Time Format">
    <ItemTemplate>
        <%# ((DateTime)Eval("OrderDate")).ToString("yyyy-MM-ddThh:mm:ss") %>
    </ItemTemplate>
</telerik:GridTemplateColumn>

 

If using the embedded Columns, you can define the format through the DataFormatString property like so:

<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime" DataFormatString="{0:yyyy-MM-ddThh:mm:ss}"
    FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
    SortExpression="OrderDate" UniqueName="OrderDate">
</telerik:GridDateTimeColumn>

 

This will display the dates as follows

 

From this point, you can use the OnGridCreated client-side event of RadGrid, and write a JavaScript code that will parse the cell's value to a JavaScript Date object. Create any Date format you like and set the result back to the cell.

Example

function OnGridCreated(sender, args) {
    var grid = sender;
    var masterTable = sender.get_masterTableView();
    var dataItems = masterTable.get_dataItems();

    for (var i = 0; i < dataItems.length; i++) {
        var currentItem = dataItems[i];

        var dateCell = currentItem.get_cell("MyCol");
        var dateValue = dateCell.innerText;

        var jsDate = new Date(Date.parse(dateValue));

        dateCell.innerText = jsDate.toLocaleDateString();
    }
}

Different Date formats:

 

The following StackOverflow article may also give you some tips: Display date/time in user's locale format and time offset

 

Regards,
Attila Antal
Progress Telerik