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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

149225 Nov 19,2019 12:15 PM UTC Nov 22,2019 03:48 AM UTC Blazor 5
loading
Tags: Grid
Bill Lemonis
Asked On November 19, 2019 12:15 PM UTC

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 [Syncfusion]
Replied On 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"> 
        <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
Replied On November 20, 2019 01:40 PM UTC

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 [Syncfusion]
Replied On 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"  ... > 
    ... 
</EjsGrid> 


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. 

Regards, 
Renjith Singh Rajendran. 


Bill Lemonis
Replied On November 21, 2019 10:49 AM UTC

Thanks again,

ModelType resolved the problem!


Regards,

Bill

Vignesh Natarajan [Syncfusion]
Replied On 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.  

Regards, 
Vignesh Natarajan. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon