We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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


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>

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,


Attachment: BlazorApp2_b2c5134c.rar

5 Replies

RS Renjith Singh Rajendran Syncfusion Team November 20, 2019 12:36 PM UTC

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, 

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"> 
                    <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> 

Please get back to us if you need further assistance. 

Renjith Singh Rajendran. 

BL Bill Lemonis November 20, 2019 01:40 PM UTC


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,


RS Renjith Singh Rajendran Syncfusion Team November 21, 2019 10:37 AM UTC

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"  ... > 

Documentations :  
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. 

Renjith Singh Rajendran. 

BL Bill Lemonis November 21, 2019 10:49 AM UTC

Thanks again,

ModelType resolved the problem!



VN Vignesh Natarajan Syncfusion Team November 22, 2019 03:48 AM UTC

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.  

Vignesh Natarajan. 

Live Chat Icon For mobile
Up arrow icon