I'm using both SfGrid and SfDatePicker elements in my blazor project. In grid, I have edit mode set to Dialog, and inside edit dialog I wanted to have datepicker with two way data binding. Unfortunately when I do that, I'm getting some unexpected exception. Important note is that I can reproduce it with pure, example code from the documentation. When I put the fragment outside the grid, binding works fine, but when I put it inside, it automatically causes exception when I try to use the calendar control.
Code:
<SfGrid ID="Grid" DataSource="@ActiveSubscribers" AllowPaging="true" AllowFiltering="true" AllowSorting="true">
<GridPageSettings PageSize="15"></GridPageSettings>
<GridFilterSettings Type="FilterType.Menu"></GridFilterSettings>
<GridEditSettings AllowEditing="true" Mode="EditMode.Dialog" Dialog="DialogParams">
<HeaderTemplate>Referrals manager</HeaderTemplate>
<Template>
<SfDatePicker TValue="DateTime" @bind-Value="@DateTest"></SfDatePicker>
<button @onclick="() => DateTest = DateTest.AddMonths(1)">Add month</button>
</Template>
</GridEditSettings>
dialogParams and DateTest is just this:
private DateTime DateTest { get; set; } = DateTime.Now;
private readonly DialogSettings DialogParams = new DialogSettings { Width = "1250px", Height="850px" };
Excepion when clicking calendar control:
Project specs:
Framework: .net core 3.1
Syncfusion version: 19.3.0.59
Hi Bjorn,
Greetings from Syncfusion support.
We have analyzed your query and we suggest you to use public property when using property binding in Grid. Kindly refer the attached code snippet for your reference.
|
<SfGrid DataSource="@GridData" AllowFiltering=true Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })">
<GridEditSettings AllowEditing="true" Mode="EditMode.Dialog" Dialog="DialogParams"> <Template> @{ <div class="form-group col-md-6"> <label class="e-float-text e-label-top">Order Date</label> <SfDatePicker TValue="DateTime" @bind-Value="@DateTest"></SfDatePicker> <button @onclick="() => DateTest = DateTest.AddMonths(1)">Add month</button>
</div> </div>
</div> } </Template> </GridEditSettings> </SfGrid>
@code{
public DateTime DateTest { get; set; } = DateTime.Now; |
Regards,
Monisha.
Thanks Monisha! That helped a lot!
Hi Bjørn,
Thanks for the update.
We are happy to hear that the provided solution was helpful. Please get back to us if you need further assistance.
Regards,
Rahul