CheckBox Column is not updated when edit mode is Dialog/Inline template

[Bill Lemonis]

Hello,

I've created an application based on your example from https://ej2.syncfusion.com/blazor/documentation/grid/editing/#dialoginline-template and I've extended with one more column of type boolean and then I tried to bind it. 

I've tried the following combinations:

1. <EjsCheckBox ID="Shipped" Checked="@(Order.Shipped)" Label="Shipped"></EjsCheckBox>

2. <EjsCheckBox ID="Shipped" @bind-Checked="@(Order.Shipped)" Label="Shipped"></EjsCheckBox>

3. <EjsCheckBox ID="Shipped" Checked="@(Order.Shipped)" Label="Shipped" OnInput="@(args => Order.Shipped = (bool)args.Value)"></EjsCheckBox>

with out any success. Replacing EjsCheckBox  with standard HTML "input type='checkbox'" works fine.

While I was trying different combinations, accidentally I ended up with the following code and it worked (having both html input and EjsCheckBox )!!

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

                            <input type="checkbox" data-val="@(Order.Shipped)" id="Shipped" name="Shipped" value="@(Order.Shipped)">

                            <EjsCheckBox ID="Shipped" Checked="@(Order.Shipped)" Label="Shipped"></EjsCheckBox>

                        </div>

How I properly use EjsCheckBox when edit mode is Template (instead of using both controls)?

On the same project, I've a second grid with "Custom Binding", which it works fine except when edit mode is Dialog/inline template. When I edit a record, it shows an empty dialog. 

Please help me on this, too.

Thanks a lot,

Bill

Attachment: BlazorApp2_b2c5134c.rar

[Renjith Singh Rajendran]

Hi Bill, 

Thanks for contacting Syncfusion support. 

We suggest you to ensure to provide the “Name” attribute for the “EjsCheckBox”. We have also modified the sample to make the checkbox column get updated with the value from the “EjsCheckBox” during dialog editing in Grid. Please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp2_b2c5134c-1373511383 

Please refer the code below, 

 

<EjsGrid TValue="OrdersDetails" ID="Grid" ModelType="@Model" AllowSorting="true" ...> 

   <EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager> 

    <GridPageSettings PageSize="8"></GridPageSettings> 

 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@Syncfusion.EJ2.Blazor.Grids.EditMode.Dialog"> 

        <Template> 

            @{ 

               <div> 

                    ... 

                    <div class="form-row"> 

                        ... 

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

                            @*OnInput="@(args => Order.Shipped = (bool)args.Value)"*@ 

                            @*<input type="checkbox" data-val="@(Order.Shipped)" id="Shipped" name="Shipped" value="@(Order.Shipped)">*@ 

                            <EjsCheckBox ID="Shipped" Name="Shipped" Checked="@(Order.Shipped)" Label="Shipped"></EjsCheckBox> 

                        </div> 

                    </div> 

                </div> 

            } 

        </Template> 

    </GridEditSettings> 

    ... 

</EjsGrid> 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Bill Lemonis]

Hello,

With the "Name"attribute it works now, thanks a lot!

Could you please help me with my second question regarding the "Custom Binding"? 

On the same page of my project, I have a second grid where I have placed an EjsDataManger with CustomAdaptor (example taken from https://ej2.syncfusion.com/blazor/documentation/grid/custom-binding/#custom-binding). The only difference is that  I've changed the Mode to dialog/inline template.

The template and the datasource are the same used on my first grid. Now, when I try to edit a record, it shows up an empty dialog.

Thanks again,

Bill

[Renjith Singh Rajendran]

Hi Bill, 

We have analyzed the sample from your previous update. And in that sample you have missed to define the “ModelType” property of Grid. We suspect that, this might be the cause of the problem(Edit Dialog shows empty). So we suggest you to ensure to provide the “ModelType” property. 

 

<EjsGrid TValue="OrdersDetails" ModelType="@Model"  ... > 

    ... 

</EjsGrid> 

Documentations :  

https://ej2.syncfusion.com/blazor/documentation/grid/editing/#dialoginline-template 

https://ej2.syncfusion.com/blazor/documentation/grid/templates/ 

 

If you are still facing difficulties, kindly share with us the following details for better assistance, 

1. Share the video demo or screenshot of the problem you are facing.
2. Share the details of the script error if any occurred in the browser console.
3. Share the sample which you have tried from your side.

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

Regards, 

Renjith Singh Rajendran. 

[Bill Lemonis]

Thanks again,

ModelType resolved the problem!

Regards,

Bill

[Vignesh Natarajan]

Hi Bill,  

Thanks for the acknowledgement.  

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan.