This is a migrated thread and some comments may be shown as answers.

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

3 Answers 62 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Albert Shenker
Top achievements
Rank 1
Veteran
Albert Shenker asked on 25 Oct 2017, 03:01 PM

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?

3 Answers, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 15 Nov 2017, 03:57 PM
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:

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ken
Top achievements
Rank 1
answered on 26 Jun 2019, 05:05 AM

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

 

0
Attila Antal
Telerik team
answered on 02 Jul 2019, 12:41 PM
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:
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Albert Shenker
Top achievements
Rank 1
Veteran
Answers by
Attila Antal
Telerik team
Ken
Top achievements
Rank 1
Share this question
or