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

4 posts, 0 answers
  1. Albert Shenker
    Albert Shenker avatar
    583 posts
    Member since:
    Mar 2004

    Posted 25 Oct 2017 Link to this post

    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?

  2. Attila Antal
    Admin
    Attila Antal avatar
    511 posts

    Posted 15 Nov 2017 Link to this post

    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.
  3. Ken
    Ken avatar
    3 posts
    Member since:
    Jan 2017

    Posted 26 Jun 2019 in reply to Attila Antal Link to this post

    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

     

  4. Attila Antal
    Admin
    Attila Antal avatar
    511 posts

    Posted 02 Jul 2019 Link to this post

    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.
Back to Top