1. Home
  2. Forum
  3. Blazor
  4. DatePicker under Grid Edit Template is not updating the date

DatePicker under Grid Edit Template is not updating the date

Hi There,
I'm using datepicker for a column edit template. When I'm clicking the update button of the grid, it is not saving the date.I'm using Syncfusion 17.4.54 version.
I'm using below code for this:
 <GridColumn Field=@nameof(LifeLineDetailModel.FabApprovedActualDate) EditType="EditType.DatePickerEdit" Format="dd/MM/yyyy" Type="ColumnType.Date" AllowEditing="EnableFabAppActual" Width="120">
       <EditTemplate>
               <EjsDatePicker ID="FabApprovedActualDate" Value="@((context as LifeLineDetailModel).FabApprovedActualDate)" TValue="DateTime?" Format="dd/MM/yyyy" Enabled="@EnableFabAppActual" Width="120">
                      <DatePickerEvents TValue="DateTime?" ValueChange="FabricApprovedActualDateChange"></DatePickerEvents>
               </EjsDatePicker>
         </EditTemplate>
 </GridColumn>

11 Replies
VN Vignesh Natarajan Syncfusion Team March 23, 2020 09:20 AM UTC

Hi Preity,  
 
Thanks for contacting Syncfusion support.  
 
We are able to reproduce the reported issue at our end. Since it is known issue, we have considered it as a bug and logged defect report for the same “Date column value is not saving properly while using EditTemplate”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our next Bi-Weekly release which is expected to be rolled out on or before April 15th, 2020.  
   
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   
   
 
Till then we suggest you to achieve your requirement using OnActionBegin event of Grid. Refer the below code example. 
 
<EjsGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <GridEvents OnActionBegin="Begin" TValue="Order"></GridEvents> 
    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings> 
    <GridColumns> 
. . . . . . . . . . ..  . 
        <GridColumn Field=@nameof(Order.OrderDate) EditType="EditType.DatePickerEdit" Format="dd/MM/yyyy" Type="ColumnType.Date" Width="120"> 
            <EditTemplate> 
                <EjsDatePicker @ref="DatePicker" ID="OrderDate" Value="@((context as Order).OrderDate)" TValue="DateTime?" Format="dd/MM/yyyy" Width="120"> 
                    <DatePickerEvents TValue="DateTime?" ValueChange="FabricApprovedActualDateChange"></DatePickerEvents> 
                </EjsDatePicker> 
            </EditTemplate> 
        </GridColumn> 
    </GridColumns> 
</EjsGrid> 
  
  
@code{ 
    EjsDatePicker<DateTime?> DatePicker { get; set; } 
    public List<Order> Orders { get; set; } 
    public void Begin(ActionEventArgs<Order> Args) 
    { 
        if(Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save) 
        { 
            Args.Data.OrderDate = DatePicker.Value; 
        } 
    } 
. . . . . .. . .  
} 
 
 
Kindly get back to us if are facing any issue in above workaround. 
 
Regards, 
Vignesh Natarajan.  
 


PR Preity May 7, 2020 09:22 AM UTC

Hi There,
I've upgraded my project to Syncfusion 18.1.0.48 and now when I click the update button, it doesn't do anything. I'm using below code:
<GridColumn Field=@nameof(Order.OrderDate) EditType="EditType.DatePickerEdit" Format="dd/MM/yyyy" Type="ColumnType.Date" Width="120"> 
            <EditTemplate> 
                <EjsDatePicker  ID="OrderDate" Value="@((context as Order).OrderDate)" TValue="DateTime?" Format="dd/MM/yyyy" Width="120"> 
                    <DatePickerEvents TValue="DateTime?" ValueChange="FabricApprovedActualDateChange"></DatePickerEvents> 
                </EjsDatePicker> 
            </EditTemplate> 
        </GridColumn> 
When I remove format from datepicker then it works fine. But I need  date format  "dd/MM/yyyy" in edit template, because without that it takes server's date format which I don't want.

VN Vignesh Natarajan Syncfusion Team May 8, 2020 11:26 AM UTC

Hi Preity,  
 
Query: “I've upgraded my project to Syncfusion 18.1.0.48 and now when I click the update button, it doesn't do anything. I'm using below code:” 
 
From your query we understand that you are facing issue after upgrading to our latest version (18.1.0.48). In our 2020 Volume 1 release we have changed the component name to SfGrid from EjsGrid. Similarly EjsDatePicker to SfDatePicker. But you have shared the older version code example. So kindly ensure that you have referred latest version theme and Nuget package.  
 
But as per your suggestion, we have prepared a sample in the latest version 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> 
        <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.  
 
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan  


PR Preity May 10, 2020 11:35 PM UTC

Hi Vignesh,
I tried the solution which you have suggested. But with that, when I'm selecting any value below or equal to 12, it saves the date but it doesn't save the correct date. So if I've selected 11th of May in datepicker, it saves 5th of November. It takes date as month and month as date. Just for your information my server's date format is MM/dd/yyyy.
And when I select a date greater than 12 then it throws below error:
Newtonsoft.Json.JsonReaderException: Could not convert string to DateTime: 25/05/2020. Path 'data.ResubmissionDate', line 1, position 239.
   at Newtonsoft.Json.JsonReader.ReadDateTimeString(String s)
   at Newtonsoft.Json.JsonTextReader.FinishReadQuotedStringValue(ReadType readType)
   at Newtonsoft.Json.JsonTextReader.ReadAsDateTime()
   at Newtonsoft.Json.JsonReader.ReadForType(JsonContract contract, Boolean hasConverter)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.SetPropertyValue(JsonProperty property, JsonConverter propertyConverter, JsonContainerContract containerContract, JsonProperty containerProperty, JsonReader reader, Object target)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent)
   at Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)
   at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings)
   at Syncfusion.Blazor.BaseComponent.Trigger(String eventName, String arg)
Error: Newtonsoft.Json.JsonReaderException: Could not convert string to DateTime: 25/05/2020. Path 'data.ResubmissionDate', line 1, position 239.
   at Newtonsoft.Json.JsonReader.ReadDateTimeString(String s)
   at Newtonsoft.Json.JsonTextReader.FinishReadQuotedStringValue(ReadType readType)
   at Newtonsoft.Json.JsonTextReader.ReadAsDateTime()
   at Newtonsoft.Json.JsonReader.ReadForType(JsonContract contract, Boolean hasConverter)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.SetPropertyValue(JsonProperty property, JsonConverter propertyConverter, JsonContainerContract containerContract, JsonProperty containerProperty, JsonReader reader, Object target)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue)
   at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent)
   at Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType)
   at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings)
   at Syncfusion.Blazor.BaseComponent.Trigger(String eventName, String arg)
    at Object.endInvokeDotNetFromJS (https://localhost:44381/_framework/blazor.server.js:8:31660)
    at e. (https://localhost:44381/_framework/blazor.server.js:8:103446)
    at https://localhost:44381/_framework/blazor.server.js:1:19202
    at Array.forEach ()
    at e.invokeClientMethod (https://localhost:44381/_framework/blazor.server.js:1:19173)
    at e.processIncomingData (https://localhost:44381/_framework/blazor.server.js:1:17165)
    at e.connection.onreceive (https://localhost:44381/_framework/blazor.server.js:1:10276)
    at WebSocket.i.onmessage (https://localhost:44381/_framework/blazor.server.js:1:38091)

VN Vignesh Natarajan Syncfusion Team May 11, 2020 08:50 AM UTC

Hi Preity,  
 
Query: “it saves the date but it doesn't save the correct date. So if I've selected 11th of May in datepicker, it saves 5th of November. It takes date as month and month as date. Just for your information my server's date format is MM/dd/yyyy.” 
 
Since your server side date format is different from provided solution, kindly ensure the reported issue by change the format in Custom JsonConvertor. Refer the below code example  
 
class CustomDateTimeConverter : IsoDateTimeConverter  
    {  
        public CustomDateTimeConverter()  
        {  
            base.DateTimeFormat = " MM/dd/yyyy ";  
        }  
    }  
 
 
If you are still facing the issue, kindly share the following detail to validate the reported issue at our end.  
 
  1. Share the upgraded Grid code example.
  2. Share your _host.cshtml file where you have referred the theme file.
  3. Share the video demonstration of the reported issue.
  4. Also share your client timezone.
  5. If possible try to reproduce the reported issue in provided sample and revert back to us.
  6. Have you applied any localization to Grid control.
 
Requested details  will be helpful for us to validate the reported issue at our end and provide the solution as soon as possible.  
 
Regards, 
Vignesh Natarajan 
 


PR Preity May 12, 2020 03:01 AM UTC

Hi Vignesh,
I changed it to "MM/dd/yyyy" but then also it was not working. Then I changed the date format of the server to "dd/MM/yyyy". Now editing an existing row works but when I add a new row, it doesn't work. Please find the attached blazor project code and a video showing the problem.

Attachment: GridAddNewRow_228ca1a4.zip

VN Vignesh Natarajan Syncfusion Team May 12, 2020 04:01 AM UTC

Hi Preity,  
 
Thanks for sharing the sample.  
 
Query: “Now editing an existing row works but when I add a new row, it doesn't work. ” 
 
We have analyzed your sample and video demonstration shared. We are able to reproduce the reported behavior at our end too. This is because you have used both @bind-value and ValueChange event of DropDownList. Now we have change the property to Value. Now DatePicker is getting opened properly during the initial selection also. 
 
We have also found that you have enabled Editing for DatePicker column on choosing a value from DropDownList. Instead of enabling the AllowEditing property of GridColumn, we suggest you to use Enabled property of DatePicker to enable / disable the Datepicker based on dropdownlist value.   
 
Refer the below code example  
 
<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"> 
            <EditTemplate Context="context"> 
                <SfDropDownList ID="CustomerID" Value="((context as Order).CustomerID)" TValue="string" TItem="string" DataSource="@customerList"> 
                    <DropDownListEvents TValue="string" ValueChange="OnCustomerChange"></DropDownListEvents> 
                </SfDropDownList> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" DefaultValue="@DefaultDate" Format="dd/MM/yyyy" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"> 
            <EditTemplate> 
                <SfDatePicker ID="OrderDate" Value="@((context as Order).OrderDate)" Enabled="@allowed" Format="dd/MM/yyyy" TValue="DateTime?"></SfDatePicker> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
    </GridColumns> 
</SfGrid> 
  
@code{ 
. . . . . . .. . .  
    public void OnCustomerChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args) 
    { 
        allowed = true; // enable the datepicker component 
    } 
} 
 
 
Please find the modified sample from below  
 
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


PR Preity May 13, 2020 01:30 AM UTC

It's working now. Thanks!

VN Vignesh Natarajan Syncfusion Team May 13, 2020 03:29 AM UTC

Hi Preity,  

Thanks for the update.  

We are glad to hear that we have resolved your query.  

Kindly get back to us if you have further queries. 

Regards,
Vignesh Natarajan  



GE Gerome replied to Vignesh Natarajan August 10, 2020 01:55 PM UTC

Hi Preity,  

Thanks for the update.  

We are glad to hear that we have resolved your query.  

Kindly get back to us if you have further queries. 

Regards,
Vignesh Natarajan  



Hi,

The sample mentioned in Sample: https://www.syncfusion.com/downloads/support/forum/152607/ze/BlazorApp31476504936  is no more working after version 18.0.1.59
It means to be more precide that if you are using

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        [JsonConverter(typeof(CustomDateTimeConverter), "dd/MM/yyyy")]
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }

Then the callback to CustomDateTimeConverter is NO MORE called since this version!
I've tried with all other versions since this mentyioned version with no success at all


Attachment: BlazorApp3_75ef6449.zip

VN Vignesh Natarajan Syncfusion Team August 11, 2020 05:58 AM UTC

Hi Gerome,  
 
Thanks for contacting Syncfusion support  
 
Query: “The sample mentioned in Sample: https://www.syncfusion.com/downloads/support/forum/152607/ze/BlazorApp31476504936  is no more working after version 18.0.1.59” 
 
We have validated the reported issue in the provided sample and we found that you have not bound the Value property of DatePicker component with Two way binding support. From our 2020 Volume 2 (18.2.0.44) we need to define the Value property with two way binding (@bind-Value) for the components inside the Templates (Edit Template, dialog Template) to save the changes properly in Grid. So kindly modify the sample as below to resolve the reported issue.  
 
<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"> 
            <EditTemplate Context="context"> 
                <SfDropDownList ID="CustomerID" @bind-Value="((context as Order).CustomerID)" TValue="string" TItem="string" DataSource="@customerList"> 
                    <DropDownListEvents TValue="string" ValueChange="OnCustomerChange"></DropDownListEvents> 
                </SfDropDownList> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" DefaultValue="@DefaultDate" Format="dd/MM/yyyy" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"> 
            <EditTemplate> 
                <SfDatePicker ID="OrderDate" @bind-Value="@((context as Order).OrderDate)" Enabled="@allowed" Format="dd/MM/yyyy" TValue="DateTime?"></SfDatePicker> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
 
Note: Before our 2020 Volume 2 release, we will serialize and deserialize the data during certain actions. At that time, issue occur with certain date format. Hence we have provided the Custom JsonConvertor for DateTime Column. But in our 2020 Volume 2 release we have resolved that issue. Hence custom Json Convertor is not necessary. Kindly ignore the CustomDateTimeConvertor workaround solution.  
 
Kindly download the modified sample from below  
 
 
Refer our UG documentation for your reference  
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon