Datepicker's two way data binding doesn't work when used inside grid's edit dialog.

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


3 Replies

MS Monisha Saravanan Syncfusion Team April 18, 2022 12:47 PM UTC

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.



BN Bjørn Nese April 19, 2022 11:30 AM UTC

Thanks Monisha! That helped a lot!



RN Rahul Narayanasamy Syncfusion Team April 20, 2022 05:02 AM UTC

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



Loader.
Up arrow icon