1. Home
  2. Forum
  3. Blazor
  4. Is there a way of using on GridColumn Field with formated Date time based on Timezone?

Is there a way of using on GridColumn Field with formated Date time based on Timezone?

Hello, I am trying to display DateTime on syncfusion grid based on the user TimeZone. I have managed to display it using Template but the issue is with filtering, since the data is displaying the dateTime based on UTC as per default from the database. so with a template no data will be displayed.

Is there a way of using on GridColumn Field with formated Date time based on Timezone?

Please see the code below:


"UserId": "35e8dfc0-8d2c-4bac-8106-0cca11ee95ee",
"DateFormat": "MMM dd, yyyy",
"TimeFormat": "hh:mm tt",
"TimeZoneId": "Europe/London"
}

component content:

<SfGrid ID="DataGrid"
@ref="DataGrid"
        DataSource="@TravelInformations"
        AllowResizing
        AllowFiltering
        AllowSorting
        AllowPaging
        AllowSelection
        Height="100%"
        AllowGrouping
        AllowReordering
        EnablePersistence>
    <GridPageSettings PageSize="10" />
    <GridSortSettings AllowUnsort />
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel" />


    <GridColumns>
         <GridColumn AutoFit TextAlign="TextAlign.Left" Field="@nameof(TravelInformation.Id)" IsPrimaryKey="true" IsIdentity="true" Visible="false" />
         <GridColumn AutoFit TextAlign="TextAlign.Left" Field="@nameof(TravelInformation.BookedDate)" HeaderText="Booked Date" Format="@formattedDateTime" Type="ColumnType.DateTime">
             <Template Context="data">
                 @FormatDateTimeToUserTimeZone((data as TravelInformation).BookedDate)
             </Template>
         </GridColumn>
         <GridColumn Field="@nameof(TravelInformation.DepartureDate)" HeaderText="Departure Date" Format="@userDateFormat" Type="ColumnType.Date">
            <Template Context="data">
                 @FormatDateTimeToUserTimeZone((data as TravelInformation).DepartureDate,true)
            </Template>
         </GridColumn><GridColumn Field="@nameof(TravelInformation.ReturnDate)" HeaderText="Return Date" Format="@userDateFormat" Type="ColumnType.Date">
            <Template Context="data">
                 @FormatDateTimeToUserTimeZone((data as TravelInformation).ReturnDate,true)
            </Template>
        </GridColumn>


     </GridColumns>
 </SfGrid>


 @code {
    [Parameter] public IEnumerable<TravelInformation>? TravelInformations { get; set; }
    private SfGrid<TravelInformation>? DataGrid;
    UserProfile? userProfile;
    private string? userDateFormat;
    private string? userTimeFormat;
    private string? formattedDateTime;
    private string? userTimeZone;


    protected override async Task OnInitializedAsync()
    {
        userProfile = await UserProfileService.GetUserProfileAsync();
        userDateFormat = userProfile.DateFormat;
        userTimeFormat = userProfile.TimeFormat;
        userTimeZone = userProfile.TimeZoneId;
        formattedDateTime = $"{userDateFormat} {userTimeFormat}";


    }
    private string FormatDateTimeToUserTimeZone(DateTime? date, bool includeTime = false)
    {


        string dateFormat = userProfile?.DateFormat;
        string timeFormat = includeTime ? $" {userProfile?.TimeFormat}" : "";


        string timezoneId = userProfile?.TimeZoneId;
        TimeZoneInfo timezone = TimeZoneInfo.FindSystemTimeZoneById(timezoneId);
        DateTime localTime = TimeZoneInfo.ConvertTimeFromUtc(date.Value.ToUniversalTime(), timezone);


        return localTime.ToString($"{dateFormat}{timeFormat}");
    }


  

8 Replies
NP Naveen Palanivel Syncfusion Team November 26, 2023 12:24 PM UTC

Hi Andreas,


We have reviewed your query and kindly request you to confirm whether the issue you are facing is that the filter does not work correctly when using a template value. Based on that we can provide a solution as soon as possible.


Regards,

Naveen Palanivel


PS Pawel Szpytma November 26, 2023 12:31 PM UTC

Hello Naveen. Filter option is not working as the Field is set to data from a database in UTC time zone and the template is setting a value to be with a different time zone. 


So the filter is only applied to actual data which is still displaying the UTC but the template is displaying the formatted time zone.


In case when I apply filter to date 20.11.2022 08:10:10 UTC time nothing will be displayed on template.


And the main issue is that I need to filter a date based on user profile settings with the correct time zone informatio. So the filter value should be also based on the specific time zone different from the database value


I hope it makes sense.


PS Prathap Senthil Syncfusion Team November 27, 2023 09:54 AM UTC

Based on your requirements, we regret to inform you that fulfilling your request is not feasible. This is because the column template feature is solely used for display purposes, and no data operations will be performed based on the values displayed in the template. This is the default behavior of the grid.

Reference: https://blazor.syncfusion.com/documentation/datagrid/column-template#using-image-inside-template


PS Pawel Szpytma replied to Prathap Senthil December 5, 2023 11:18 AM UTC

Sorry for the delay in response. 


Is there no way of pass  Field with formatted data on flow? So once more I have database with Date Time zone set up per default to UTC, once the user change his location details to different time zone I need to display Field for TravelInformation.BookedDate based on user user settings.
I was thinking about passing @FormatDateTimeToUserTimeZone((data as TravelInformation).BookedDate) as a  Field value but it is not allowing me. 

What would be the best approach to achieve that ? I hope it is make clear now what exactly I need as I want to have those same values in the field and on template as per user TimeZone settings


PS Pawel Szpytma December 8, 2023 11:03 AM UTC

Can I have an update on this please? 


PS Prathap Senthil Syncfusion Team December 11, 2023 02:48 AM UTC

Sorry for the inconvenience caused.

Based on your requirements, we regret to inform you that it is not feasible to achieve your request. This is because the column template feature is solely used for display purposes, and no data operations will be performed based on the values displayed in the template.


PS Pawel Szpytma December 11, 2023 10:13 AM UTC

I understand that the template feature is solely for displaying purposes bur I want to achieve the universal grid for any user based on their time zone settings. I want to pass specific date based on Specific time zone to the field of grid without using template. So it will be filterable sortable and displaying correct date value. 

Case A : User set his time zone to UTC  so it should display date 12/11/2023 20:00:00 

Case B: User set his time zone to UTC +2  so it should display date 12/11/2023 22:00:00 

Case C: User set his time zone to UTC +3  so it should display date 12/12/2023 01:00:00  

The original date is stored in database in UTC so on initialized the date needs to be transformed to the specific time zone. 

I hope that makes more sense. As I fully understand that the template is just for displaying purpose. What I need is to pass the value to the syncfusion grid based on specific Time Zone settings of each user. 


PS Prathap Senthil Syncfusion Team December 14, 2023 10:38 AM UTC

Thanks for the update,


We would like to inform you that if you bind the value in the Database UTC datetime, the value in the grid will be displayed based on the local time. If you modify the local time using editing operations in the grid, it will be saved in the server's local time, converting it to UTC. This behavior is inherent to the grid, so you don't need to define external properties or zones for conversion.


Loader.
Up arrow icon