GridDateTimeColumn to localtime

[Tom]

How can I convert the date time to localtime in GridDateTimeColumn?  On ASP.net grid control, I used itemtemplate then convert the datetime field to local time using "ToLocalTime()" but I don't know how to do it in GridDateTimeColumn.                    

Thanks
Tom

[Veli]

Hello Tom,

You have a couple of options here:

1. Convert the DateTime values right into the data collection you pass to RadGrid before binding. If you are using the NeedDataSource event to bind the grid, you can convert your date values there and pass the modified data to the grid.

2. Parse the string into the date cells for each data item after binding, convert the date to local time and reset the table cell text. You can use RadGrid's ItemDataBound event for this:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = (GridDataItem)e.Item;

        try
        {
            //"Date" is the UniqueName of my GridDateTimeColumn
            DateTime date = DateTime.Parse(item["Date"].Text);
            item["Date"].Text = date.ToLocalTime().ToString();
        }
        catch (Exception ex) { }
    }
}

Note that in this case, I am only modifying the displayed text, not the actual data value from RadGrid's data source. This approach is closer  to using Eval() with a GridTemplateColumn as you pointed.

Note also that the first approach is considered safer than the second, especially when you use RadGrid data operations like filtering. This is because in the first case, we are modifying the data values passed to RadGrid and any filtering will use the modified data. This is not the case with the second approach, in which we are only changing the cell text. Filter operations will use the original non-modified date value and your users need to select the original non-localized DateTime to get the corrent results and not the localized cell values.

Best wishes,
Veli
the Telerik team

[Dan]

I believe what the code above (@veli) will do, is: convert the to local Server system time, assuming the original time is Universal (UTC)?
what I  (and possibly Tom) are asking is to convert to client side Time zone. This can be achieved by doing a front end (javascript) conversion (from universal) is there a built in function that can do this for GridDateTime value, in Telerik 2015.2.623.45 ?
Or if not should I just use a template Column and do a front end conversion (as tom indicated above?)



   

[Kostadin]

Hello,

A possible solution is to traverse all rows on the client and manually covert the time. For this purpose you need to hook OnGridCreated client event and get the cells values. The following code snippet demonstrates how to achieve that.

<script type="text/javascript">
    function OnGridCreated(sender, args)
    {
        var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
        var items = masterTable.get_dataItems();

        for (var i = 0; i < items.length; i++) {
            var date = masterTable.getCellByColumnUniqueName(items[i], "DateColumnUniqeName").innerHTML;
            // conver the date and set it back to the cell.
        }
    }
</script>

Additionally I would recommend you to examine the grid Client API for more methods and properties which might help you achieving your requirement. 

Regards,
Kostadin
Telerik by Progress

[Dan]

Hi Thank you for the reply, It's a good suggestion.

I have already deployed the following solution, (which is similar)

asp.net:

protected void mainGrid_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem row = (GridDataItem)e.Item;

            try
            {
                DateTime date = DateTime.Parse(row["ExDate"].Text);
                Label DateExpLabel = (Label)row.FindControl("lblexDate");
                double totalmili = (date.ToUniversalTime() - new DateTime(1970, 1, 1)).TotalMilliseconds;
                DateExpLabel.Text = totalmili.ToString();
}

JavaScript:

<script type="text/javascript">
     function pageLoad() {
          $('*[id*=lblexDate]').each(function (i, el) {
           var exDate =  new Date(parseInt(this.innerHTML));
           this.innerHTML = dateFormat(exDate);
           });
      }


          function dateFormat(date) {
           var month = date.getMonth() + 1;
           var day = date.getDate();
           var year = date.getFullYear();
           var hour = (date.getHours() < 10 ? '0' : '') + date.getHours();
           var min = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
           return (month + "/" + day + "/" + year + " " + hour + ":" + min);
       }

  </script>

It works just as intended.