EjsGrid double binding issue in - Grid editing template

[Linqing Shangguan]

Dear Support team, 

Hope you are well and safe in this difficult time around the world. :)

The issue I'm having is about input component binding to data Context. For the code below: 

     <EjsDateTimePicker .... @bind-Value="rec.ReceivedDate" ....

If I'm using one-way binding (Value="@rec.ReceivedDate"), I can get data mapped and displayed within dialog with no issue. (But it turns out, I wouldn't get any data - ReceivedDate from the Dialog neither. Which is quite different to EjsTextBox behaviour. ) Furthermore, if I'm using two way binding, code shown above, then the "Save" button in the dialog will not do anything, e.g. not triggering action OnActionBegin

Where have I done wrong here please? 

Sample codes shown below:

   

       

          

 <div class="container p-0 m-0">

        <div class="row">

            <div class="col">

                <EjsGrid TValue="Collection" AllowPaging="true" AllowSorting="true" AllowResizing="true"

                         EnableHover="true" GridLines="GridLine.Both" @ref="CollectionGrid" DataSource="@collectionList"

                         Toolbar="@(new List<string>() {  "Add", "Edit", "Search"})">

                    <GridPageSettings PageSize="10"></GridPageSettings>

                    <GridEvents OnActionBegin="ModelActionBeginHander" TValue="Collection"></GridEvents>

                    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="false" Mode="@EditMode.Dialog">

                        <Template>

                            @{

                                var rec = (context as Collection);

                                <div class="col-md-12">

                                    <br />

                                    <div class="form-row">

                                        <div class="form-group col">

                                            <EjsTextBox ID="DisplayName" Value="@rec.DisplayName" FloatLabelType="@FloatLabelType.Auto" Placeholder="Collection name"></EjsTextBox>

                                        </div>

                                    </div>

                                    <div class="form-row">

                                        <div class="form-group col-6">

                                            <EjsNumericTextBox ID="DeviceCount"Value="@rec.DeviceCount" FloatLabelType="@FloatLabelType.Auto" Placeholder="Device count"></EjsNumericTextBox>

                                        </div>

                                        <div class="form-group col-6">

                                            <EjsDateTimePicker ID="ReceivedDatetime" TValue="DateTime?"  @bind-Value="rec.ReceivedDate" FloatLabelType="@FloatLabelType.Auto" Placeholder="Received Datetime"></EjsDateTimePicker>

                                        </div>

                                    </div>

                                </div>

                            }

                        </Template>

                    </GridEditSettings>

                    <GridColumns>

                        <GridColumn Field=@nameof(Collection.CollectionID) IsPrimaryKey="true" Visible="false"></GridColumn>

                        <GridColumn Field=@nameof(Collection.AccountManagerID) HeaderText="Account Manager" MinWidth="120" MaxWidth="280" Visible="false"></GridColumn>

                        <GridColumn Field=@nameof(Collection.DisplayName) HeaderText="Collection Name"></GridColumn>

                        <GridColumn Field=@nameof(Collection.ReceivedDate) HeaderText="Received Date" MinWidth="120" MaxWidth="280"></GridColumn>

                        <GridColumn Field=@nameof(Collection.DeviceCount) HeaderText="Device Count" MinWidth="120" MaxWidth="280"></GridColumn>

                        <GridColumn Field=@nameof(Collection.VatType) HeaderText="VAT Type" MinWidth="120" MaxWidth="280"></GridColumn>

                        <GridColumn Field=@nameof(Collection.Comments) HeaderText="Comments" MinWidth="120" MaxWidth="280" Visible="false"></GridColumn>

                        <GridColumn Field=@nameof(Collection.SupplierID) HeaderText="Supplier Company" MinWidth="120" MaxWidth="280" Visible="false" Type="@ColumnType.String"></GridColumn>

                    </GridColumns>

                </EjsGrid>

            </div>

        </div>

    </div>

///////////// code /////////////

    public async Task ModelActionBeginHander(ActionEventArgs<Collection> args)

    {

        // Here you can customize your code

        if (args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save)

        {

            var rec = args.Data as Collection;

            if (rec.CollectionID > 0)

                await _db.UpdateCollection(rec);

            else

            {

                rec.RefStatusID = await _db.GetStatusIDByCode("RECEIVED") ?? -1;

                rec.ReceivedDate = (rec.ReceivedDate == null)? DateTime.UtcNow : rec.ReceivedDate;

                await _db.AddCollection(rec);

                var t = collectionList.FindIndex(c => c.CollectionID == 0 && c.DisplayName.Equals(rec.DisplayName));

                if(t >= 0)

                {

                    collectionList[t].ReceivedDate = rec.ReceivedDate;

                }

            }

            args.Cancel = false;

            StateHasChanged();

        }

    }

[Vignesh Natarajan]

Hi Linqing Shangguan,  

 

Thanks for your concern. We hope the same from you.  

 

Query: “Furthermore, if I'm using two way binding, code shown above, then the "Save" button in the dialog will not do anything, e.g. not triggering action OnActionBegin” 

 

We understand that you are facing issue while using two way binding support for DateTimePicker inside the Grid Dialog Template editing. We have validated the reported issue by preparing a sample using your code example in 17.4.0.55 version. We are not able to reproduce the reported issue at our end.  

 

Kindly download the sample (using 17.4.0.55) from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/152677/ze/General-1640937189  

 

We would like to inform you that our 2020 Volume 1 (18.1.0.36-beta) beta release has been rolled out successfully last week. Kindly upgrade to our latest version and ensure the reported issue. Please find the breaking changes from below release notes.  

 

https://blazor.syncfusion.com/documentation/release-notes/18.1.36/      

 

After referring the sample and upgrading to our latest version, if you are still facing the issue kindly get back to us with following details.  

 

1. Share the Grid code example updated (to latest version).
2. Are you facing any exception in console while clicking the Save button?. If yes share the screenshot of the issue.
3. Share your previous (before upgrading) Nuget package version and Script files version.  
4. Share your model class along with details about your dataSource.
5. If possible try to reproduce the reported issue in provided sample and revert back to us.

 

Regards, 

Vignesh Natarajan. 

[Linqing Shangguan]

Dear Vignesh, 

Many thanks for your help. This issue was still persistent, however I found a good alternative solution from a different support thread, which was suggesting to instant-lize the Dialog component, and read its value from directly. Some code shown below for the people who having the same situation I was in: 

<SfComboBox @ref="@edit_cb_accountManager" ID="AccountManager" 

Value="@rec.AccountManagerID" FloatLabelType="@FloatLabelType.Auto"

Placeholder="Account Manager" TValue="long?" TItem="UserModel" DataSource="@AccountManagerList">

<ComboBoxFieldSettings Value="RefUserID" Text="FullName"></ComboBoxFieldSettings>

</SfComboBox>

---------------code--------------------

    SfComboBox<long?, UserModel> edit_cb_accountManager { get; set; }

    public async Task ModelActionBeginHander(ActionEventArgs<Collection> args)

    {

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)

        {

            var rec = args.Data as Collection;

            rec.AccountManagerID  = edit_cb_accountManager?.Value;

          ...................

As always, many thanks for your help!

Kind regards

Linqing

[Vignesh Natarajan]

Hi Linqing, 

Thanks for the update.  

We are glad to hear that you have resolved your query on your own.  

Kindly get back to us if you have any other queries.  

Regards, 

Vignesh Natarajan.