1. Home
  2. Forum
  3. Blazor
  4. Date Field as template is not updating

Date Field as template is not updating

Hello SyncFusion

I need some advice.
I have a grid, you probably seen it already a few times :)

One of the columns look like this

                                    <GridColumn HeaderText="Resource Date" Field=@nameof(ResourceForGridDTO.ResourceDate) Width="60">
                                        <Template>
                                            @{
                                                var formattedDate = Convert.ToDateTime((context as ResourceForGridDTO).ResourceDate).ToShortDateString();
                                                if (formattedDate == @"01/01/0001")
                                                {
                                                    formattedDate = "";
                                                }
                                                @formattedDate;
                                            }
                                        </Template>
                                        <EditTemplate>
                                            <SfDatePicker @ref="DatePicker" ID="ResourceDate" Format="dd/MM/yyyy" Value="@((context as ResourceForGridDTO).ResourceDate)" TValue="DateTime?" Width="60">
                                                <DatePickerEvents TValue="DateTime?" ValueChange="GridResourceDateChange"></DatePickerEvents>
                                            </SfDatePicker>
                                        </EditTemplate>
                                    </GridColumn>
Which is fine.
But when I edit the date field it does not refresh when I click update, it DOES update, and this value is only seen when the grid is refreshed.

What can I do?

Regards

John

14 Replies
PS Pavithra Subramaniyam Syncfusion Team June 25, 2020 01:17 PM UTC

Hi John, 
 
Thanks for contacting Syncfusion support. 
 
We have validated the reported scenario and we are able to reproduce the reported issue while selecting the value above the 12. This is because there is some error while serializing the DateTime Object. To overcome the reported issue we suggest you to use the below custom JsonConvertor for DateTime object. Refer the below code example  
 
<SfGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">    
    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" EditType="EditType.NumericEdit" Format="C2" Width="140" TextAlign="@TextAlign.Right"></GridColumn> 
         // Set the Column EditType 
        <GridColumn Field=@nameof(Order.OrderDate) EditType="EditType.DatePickerEdit" Format="dd/MM/yyyy" Type="ColumnType.Date" Width="120"> 
            <EditTemplate> 
                <SfDatePicker ID="OrderDate" Value="@((context as Order).OrderDate)" TValue="DateTime?" Format="dd/MM/yyyy" Width="120"> 
                    <DatePickerEvents TValue="DateTime?" ValueChange="FabricApprovedActualDateChange"></DatePickerEvents> 
                </SfDatePicker> 
            </EditTemplate> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
  
@code{ 
    SfDatePicker<DateTime?> DatePicker { get; set; } 
    public List<Order> Orders { get; set; } 
   public class Order 
    { 
        public int? OrderID { get; set; } 
        public string CustomerID { get; set; } 
        [JsonConverter(typeof(CustomDateTimeConverter))] 
        public DateTime? OrderDate { get; set; } 
        public double? Freight { get; set; } 
    } 
    class CustomDateTimeConverter : IsoDateTimeConverter 
    { 
        public CustomDateTimeConverter() 
        { 
            base.DateTimeFormat = "dd/MM/yyyy"; 
        } 
    } 
} 

 
For your convenience we have attached a sample using our latest version with above solution.  
 
 
Please get back to us if you need further assistance on this. 

Regards, 
Pavithra S 


JO John June 26, 2020 01:17 PM UTC

Hi, thanks for the reply.

I tried this

[JsonPropertyName("resourceDate")]
 [JsonConverter(typeof(CustomDateTimeConverter))]
 public DateTime ResourceDate { get; set; }

 and now receive the following error

System.InvalidOperationException: The converter specified on 'Shareclx.shared.Models.ResourceForGridDTO.ResourceDate' does not derive from JsonConverter or have a public parameterless constructor.
   at System.Text.Json.ThrowHelper.ThrowInvalidOperationException_SerializationConverterOnAttributeInvalid(Type classType, PropertyInfo propertyInfo)
   at System.Text.Json.JsonSerializerOptions.GetConverterFromAttribute(JsonConverterAttribute converterAttribute, Type typeToConvert, Type classTypeAttributeIsOn, PropertyInfo propertyInfo)
   at System.Text.Json.JsonSerializerOptions.DetermineConverterForProperty(Type parentClassType, Type runtimePropertyType, PropertyInfo propertyInfo)
   at System.Text.Json.JsonClassInfo.CreateProperty(Type declaredPropertyType, Type runtimePropertyType, Type implementedPropertyType, PropertyInfo propertyInfo, Type parentClassType, JsonConverter converter, JsonSerializerOptions options)
   at System.Text.Json.JsonClassInfo.AddProperty(Type propertyType, PropertyInfo propertyInfo, Type classType, JsonSerializerOptions options)
   at System.Text.Json.JsonClassInfo..ctor(Type type, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializerOptions.GetOrAddClass(Type classType)
   at System.Text.Json.JsonPropertyInfo.get_ElementClassInfo()
   at System.Text.Json.JsonSerializer.ReadCore(JsonSerializerOptions options, Utf8JsonReader& reader, ReadStack& readStack)
   at System.Text.Json.JsonSerializer.ReadCore(JsonReaderState& readerState, Boolean isFinalBlock, ReadOnlySpan`1 buffer, JsonSerializerOptions options, ReadStack& readStack)
   at System.Text.Json.JsonSerializer.ReadAsync[TValue](Stream utf8Json, Type returnType, JsonSerializerOptions options, CancellationToken cancellationToken)
   at Shareclx.server.Services.ApiService.GetResourcesAsync(Int32 libraryId) in C:\Users\belle\Source\Workspaces\SHARECLX\Shareclx\Shareclx.server\Services\ApiService.cs:line 89
   at Shareclx.server.Pages.Libraries.GetMainResources(Boolean selecthomeicon) in C:\Users\belle\Source\Workspaces\SHARECLX\Shareclx\Shareclx.server\Pages\Libraries.razor:line 588
   at Shareclx.server.Pages.Libraries.OnParametersSetAsync() in C:\Users\belle\Source\Workspaces\SHARECLX\Shareclx\Shareclx.server\Pages\Libraries.razor:line 857
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'a0ISGLzA5oTU-1vKPyyC-gSvLJ0WvkCBXD_LAHavPG8'.


John

PS Pavithra Subramaniyam Syncfusion Team June 29, 2020 01:22 PM UTC

Hi John, 
 
We have tried to reproduce the reported exception at our end but it is working fine with latest Syncfusion package and Newtonsoft Json converters. We have attached the sample for your reference below. 
 
 
If you are sill facing the issue please share the below details that will be helpful for us to provide a better solution as early as possible. 
 
  1. Please share the Syncfusion package version.
  2. Share the issue reproducible sample if possible
  3. Share the full Grid code
 
Regards, 
Pavithra S 


JO John June 29, 2020 05:15 PM UTC

Hi,

Thanks, but I gave up on this grid, it just doesn't cut it for scenarios outside USA so I have moved on.
I love all your other components though.

Regards

John

DF df July 1, 2020 08:17 PM UTC

Hi, 
just to join to this thread discussion, I also have a problem with dates higher than 12 (must be the error with date/month switch somewhere), but after testing example you provided  I noticed that even the date change works now, it doesn't update the date field in the grid after the first edit, it only updates it after you change the value second time.
It happens only the first time you try to change the date, after you change the value once, the second time it accepts change immediately.

KM Kuralarasan Muthusamy Syncfusion Team July 2, 2020 12:48 PM UTC

Hi John, 

Regarding template refresh behavior, we have created a new incident under your Direct trac account to follow up furtherly. We suggest you to follow up with the incident for further updates. Please log in using the below link.  


Regards, 
Kuralarasan M 


KM Kuralarasan Muthusamy Syncfusion Team July 2, 2020 12:49 PM UTC

Hi df, 

Query: it doesn't update the date field in the grid after the first edit 

From your previous forums, we found that you have used WebApi service to provide datasource to Grid. So, we have prepared a sample by using API service and DateTime object serializing solution. But we are unable to reproduce this issue at our end. So, we have attached our sample in the below link for your reference. 


Also, we suggest you to share the below details for further assistance. 

  1. Full Grid code.
  2. Model datasource.
  3. Screenshot or video demonstration of the issue.
  4. If possible try to reproduce the issue in our sample and send back to us.
  5. Syncfusion package version.

Regards, 
Kuralarasan M 


DF df July 2, 2020 02:02 PM UTC

Hi Kuralarasan,

thanks for answering, the problem I mentioned and where I noticed the problem with edit and a save  is not in my project you mentioned from the one of my previous posts.

( later I found out that same behavior happens with me also).

I was referring to the sample provided by Mr. Pavithra as a reply to Mr. John question:

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateColumn995738293

The funny thing is that, in the upper sample, if you, for example, change text field with Customer name, it works fine, I only noticed this behavior with

date field.

I'm using  Syncfusion.Blazor  18.1.0.59.






KM Kuralarasan Muthusamy Syncfusion Team July 3, 2020 05:27 AM UTC

Hi df, 

We have checked the reported issue in (https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateColumn995738293) this sample. But unable to reproduce the issue in this sample too. So, we have prepared a video demo for your reference and you can download it from the below link. 


If we misunderstood your query, please share the replication procedure or video demonstration of the issue. This will help to us to provide a solution for the issue as soon as possible. 

Regards, 
Kuralarasan M 


DF df July 3, 2020 09:26 AM UTC

Hi,
I can see it works on your screen. Here is my video with this problem. I'm running the same project.
As you can see I first edit the date, press update, date not changed, I edit again the same record date changes this time.
I tried on 2 more, the same thing, then I edit record which I edited before and date changes after the update.

I hope it's more clearer now.

In my opinion, it must be something in connection with regional date settings. I also included the picture of my regional settings.

Best regards,


Attachment: DateProblem_a8463dc6.7z

KM Kuralarasan Muthusamy Syncfusion Team July 6, 2020 06:48 AM UTC

Hi df, 

Thanks for the details. 

We are able to reproduce the issue while using your regional date settings. To resolve this issue, we suggest to use bind-Value value property in edit template datepicker (like as below code snippet) instead of Value. 

<EditTemplate> 
                <SfDatePicker ID="OrderDate" @bind-Value="@((context as Order).OrderDate)" TValue="DateTime?" Format="dd/MM/yyyy" Width="120"> 
                    <DatePickerEvents TValue="DateTime?" ValueChange="FabricApprovedActualDateChange"></DatePickerEvents> 
                </SfDatePicker> 
            </EditTemplate> 

We have modified the sample for your reference and you can download it from the below link. 


Regards, 
Kuralarasan M 


JO John July 6, 2020 09:50 AM UTC

Great, thanks! This is working for me now!

DF df replied to Kuralarasan Muthusamy July 6, 2020 10:59 AM UTC

Hi df, 

Thanks for the details. 

We are able to reproduce the issue while using your regional date settings. To resolve this issue, we suggest to use bind-Value value property in edit template datepicker (like as below code snippet) instead of Value. 

<EditTemplate> 
                <SfDatePicker ID="OrderDate" @bind-Value="@((context as Order).OrderDate)" TValue="DateTime?" Format="dd/MM/yyyy" Width="120"> 
                    <DatePickerEvents TValue="DateTime?" ValueChange="FabricApprovedActualDateChange"></DatePickerEvents> 
                </SfDatePicker> 
            </EditTemplate> 

We have modified the sample for your reference and you can download it from the below link. 


Regards, 
Kuralarasan M 


Hi,
can't download the sample, some aws.amazon error, but I modified the previous sample with your suggested changes and it works.

I still have some formatting issues in my app,  but need to check the details and get back to you.




DR Dhivya Rajendran Syncfusion Team July 7, 2020 03:07 PM UTC

Hi df, 

Thanks for your update. 

We are happy to hear that the provided suggestion was helpful to achieve your requirement. You can ensure the solution at your end and get back to us if you require further assistance form us. 

Regards, 
R.Dhivya 


Loader.
Up arrow icon