DateTimePicker: 2-Way binding not working as expected

7 Replies
2 Participants

Created by
SW Scot Woodyard

Platform
Blazor

Platform
Blazor

Control
Grid

Created On
Aug 25, 2021 10:30 PM UTC

Last Activity On
Sep 20, 2021 08:57 AM UTC

Want to subscribe?
SIGN IN

In the attached files, there is a DataGrid that has two DateTimePickers. 2-way binding is configured, but not working correctly. You can change the date and time values, but as soon as you click on save the modal dialog stays open and all the values in the dialog reset.

Example:

Before changing data:

Change date/time:

Click on SAVE:

Attachment: TrainingComponent.razor_548790d8.zip

7 Replies

RS Renjith Singh Rajendran Syncfusion Team August 26, 2021 02:36 PM UTC

Hi Scot,

Greetings from Syncfusion support.

We suggest you to ensure to use a CRUD handled OData service(as like the below documentation) to perform CRUD in a Grid bind with ODataV4Adaptor. Also we suggest you to check whether the CRUD is properly handled based on your PrimaryKey column value in OData service. Please refer the documentation below,

https://blazor.syncfusion.com/documentation/common/data-binding/restful-service-binding#handling-crud-operations-with-our-syncfusion-blazor-datagrid-component

If you are still facing difficulties then the following details would be helpful for us to proceed further.

Bind OnActionFailure event to grid, and share the details you get in the args of this event handler.
Share a video demo showing the replication of the problem you are facing.
Share the details of any exception, if any occurred in the browser console.
If possible, share a simple issue reproducing sample to us to validate based on this scenario.

The provided information will help us analyze the problem, and provide you a solution as early as possible.

Regards,

Renjith R

SW Scot Woodyard August 26, 2021 05:34 PM UTC

OnActionEvent was implemented, but it never gets called
This exception is being thrown by the ODATA API whenever I change either of the DateTime values using teh DateTimePicker:

Message "One or more errors occurred. (One or more errors occurred. (Cannot convert the literal '2021-08-26T00:00:00' to the expected type 'Edm.DateTimeOffset'.))"

RS Renjith Singh Rajendran Syncfusion Team August 30, 2021 03:38 AM UTC

Hi Scot,

We checked your shared codes, we could see that you have repeated the SfDateTimePicker inside Template two times for the same EndDate field. We are suspecting that this might be causing problem from your side. So please check this by modifying your repeated EndDate field name to StartDate field from your side.

<label class="e-label-top">Start Date</label>

<SfDatePicker TValue="DateTime"

@bind-Value="@Training.StartDate"

AllowEdit="true"

Format="MM/dd/yy HH:mm tt">

</SfDatePicker>

</div>

<SfDateTimePicker TValue="DateTime"

@bind-Value="@Training.EndDate">

</SfDateTimePicker>

</div>

If you are still facing difficulties, then kindly get back to us with the complete stacktrace of the exception you are facing along with the odata controller page codes(we need to check the PATCH method codes which you have used) to proceed further.

Regards,

Renjith R

SW Scot Woodyard August 30, 2021 06:03 PM UTC

Made the changes above, but that did not resolve the issue. Blazor is expecting a Edm.DateTimeOffset value, and the control is sending a literal DateTime value.

Here is the controller code:

[HttpPatch("Training({id})")]

public async Task UpdateTraining(Guid id, [FromBody] Delta patch)

{

if (!ModelState.IsValid)

{

return BadRequest(ModelState);

}

var training = await _itssMasterContext

.Training

.FirstOrDefaultAsync(e => e.Id == id

);

if (training == null)

{

return NotFound();

}

patch.Patch(training);

await _itssMasterContext.SaveChangesAsync();

return NoContent();

}

The exception gets thrown here:

if (!ModelState.IsValid)

{

return BadRequest(ModelState);

}

The Exception is:

One or more errors occurred. (One or more errors occurred. (Cannot convert the literal '2021-08-30T09:10:00' to the expected type 'Edm.DateTimeOffset'.))

Stack trace: