Client-bound grid, DateTimeColumn showing different data depending on user's clock settings

[Albert Shenker]

I believe this is a bug since it is causing unexpected results.

I have a grid which is bound client-side to a web service. It would appear that datetime columns are being displayed differently, depending on the user's clock settings. In my scenario, my grid has two such columns (declared below).

<telerik:GridDateTimeColumn HeaderText="Svc. Date" DataField="ServiceDate" DataType="System.DateTime" DataFormatString="{0:MM/dd/yy}" AllowFiltering="false">
    <HeaderStyle width="80px" HorizontalAlign="Left" BorderStyle="None"></HeaderStyle>
</telerik:GridDateTimeColumn>
<telerik:GridDateTimeColumn  HeaderText="Created When" DataField="CreatedWhen" DataType="System.DateTime" DataFormatString="{0:MM/dd/yy hh:mm:ss tt}" AllowFiltering="false">
    <HeaderStyle width="140px" HorizontalAlign="Left" BorderStyle="None"></HeaderStyle>
</telerik:GridDateTimeColumn>

For users who are in the Central US timezone, the "ServiceDate" column is showing as one day earlier, and the "CreatedWhen" column is showing as one hour earlier. When they switch their computer clock to Eastern Timezone (the correct zone for the data being retrieved), then the ServiceDate and CreatedWhen columns appear correctly.

Looking at the json being used to bind the grid to, for one row, these are the values being retrieved from the database...

"ServiceDate":"\/Date(1508904000000)\/", "CreatedWhen":"\/Date(1508942284530)\/"

So, it appears whatever mechanism the grid is using to convert these date objects to date literals is using the user's computer settings. Is this true?

I'm not sure this is a good implementation. The data being retrieved from the database is intended to be displayed as is. Any manipulations to customize for user timezone should be handled by the developer. After all, the grid does not know what timezone the data being retrieved is in, so how does it know how to convert to the user's local machine timezone?

In this case, the data being retreived was in Eastern US timezone. So, a date of '10/24/17', for instance, was being displayed as '10/23/17' (one hour earlier than 10/24/17 00:00:00, assumedly)

So, is there any way to prevent this behavior?

[Attila Antal]

Hi Albert,

When binding data on client-side, it is expected that time is being displayed based on the client machine's time zone. You can sustomize it if you would like, below I will show you some examples. In this case, however, the data should be passed as a string. 

[{ "ServiceDate": "1508904000000", "CreatedWhen": "1508942284530" }, { ... }]


One approach would be similar to our demo on using Grid - ClientItemTemplate and format the data with the help of a JavaScript method.

For example:

JavaScript

function formatDate(createdWhen) {
    // execute custom logic to format the date
    return createdWhen;
}

Markup

<telerik:GridTemplateColumn HeaderText="CreatedWhen">
    <ClientItemTemplate>
        <span>#=formatDate(CreatedWhen)#</span>
    </ClientItemTemplate>
</telerik:GridTemplateColumn>

Another approach would be to use the OnRowDataBound client-side event in which you can format the text before it is displayed to the user. Here are some references you can use to get help on that:

• Accessing Cells and Values in Client-Side Code
• getDataKeyValue()

For example:

JavaScript

function rowDataBound(sender, args) {
    // execute custom logic
}

Markup

<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AutoGenerateColumns="true" runat="server" Width="500px">
    <ClientSettings>
        <ClientEvents OnRowDataBound="rowDataBound" />
    </ClientSettings>
    <MasterTableView TableLayout="Fixed" DataKeyNames="ServiceDate" ClientDataKeyNames="ServiceDate">
        <Columns>
            <telerik:GridDateTimeColumn HeaderText="Svc. Date" DataField="ServiceDate" DataType="System.String" UniqueName="ServiceDate">
            </telerik:GridDateTimeColumn>
            <telerik:GridDateTimeColumn HeaderText="Created When" DataField="CreatedWhen" DataType="System.String" UniqueName="CreatedWhen">
            </telerik:GridDateTimeColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Hope this addresses your concerns.

Kind Regards,
Attila Antal
Progress Telerik

[Ken]

Hi Attila,

When you bind the datetime column in the format of string, sorting causes problem. Grid sorts the column as like string and not as date field.

Please provide us some solution for sorting on such field.

 

Thanks,

Sudha

 

[Attila Antal]

Hi Ken,

The Client-side Binding help article described several different ways of binding data on client-side. Can you please tell us which method are you using?

Visit the following online demos and test out the sorting of columns for client-side bound RadGrid:

• Grid - Programmatic Binding
• Grid - Declarative Binding

You may also check out the attached Sample WebForms page which demonstrates the scenario mentioned earlier in this forum thread.

Eventually it would be very helpful if you could provide us with more details about the current setup so that we can replicate and test the issue locally.

Kind regards,
Attila Antal
Progress Telerik