1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Grid edit mode normal boolean as checkbox

Grid edit mode normal boolean as checkbox

Hello

I am using ASP.NET CORE EJ 2 version 16.1.0.34 (nuget package).

Could you please provide me with an example on how to use a checkbox for editing a boolean column in grid (with Url adaptor) using inline editing mode?

I was able to display the boolean value as a checkbox with the "DisplayAsCheckBox" or a template, but as soon as I start editing, the value is displayed as "true/false" instead of a clickable checkbox.


Kind regards
Phil

9 Replies
DR Dhivya Rajendran Syncfusion Team April 23, 2018 12:04 PM UTC

Hi Phil, 

Thanks for contacting Syncfusion support. 

Query: I start editing, the value is displayed as "true/false" instead of a clickable checkbox 
 
You can achieve your requirement by using editType as booleanedit for the checkbox column or the template in Grid. We have created a sample for your reference, in the below sample we have set editType as  booleanedit for the verified (checkbox) column so that in editMode, verified column displayed as clickable checkbox. Kindly refer to the below code example and sample for more information. 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "Edit" })" allowPaging="true"> 
        <e-grid-editSettings  allowEditing="true" mode="Normal"></e-grid-editSettings> 
        <e-grid-columns> 
            . . . . . 
            <e-grid-column field="Verified" headerText="Verified" width="150" displayAsCheckBox="true" textAlign="Center" editType="booleanedit" type="boolean"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 

 


Please get back to us if you need further assistance. 

Regards, 
R.Dhivya 


UN Unknown April 24, 2018 06:50 AM UTC

Thank you for your reply.

It worked, the boolean value can now be set with a checkbox.
However, when changing the first row I get the following javascript  error: 

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at split-button.js:294
    at e.get (split-button.js:294)
    at e.onFocus (split-button.js:294)

All other rows work fine.
Do you know why this happens?

I wonder where it is documented that "booleanedit" has to be used? In the grid documentation (https://help.syncfusion.com/aspnet-core/grid/editing#toolbar-with-edit-option) the edit type is set to "Boolean" but this does not work.
<e-column field="Verified" header-text="Verified" edit-type="Boolean"></e-column>

On a side note, it might be useful to add the boolean edit as a checkbox to the grid demo?
It seems like this feature might be used quite a lot.


Kind regards
Phil


DR Dhivya Rajendran Syncfusion Team April 25, 2018 02:12 PM UTC

Hi Phil, 
 
Thanks for your update. 
 
Query:  when changing the first row I get the following javascript  error? 
 
We have checked the scenario in our sample and we are unable to reproduce the reported problem, could you provide the below details it will be helpful for us to provide a better solution as soon as possible. 
 
  1. If possible, could you please provide the sample or reproduce the issue in the previously provided sample.
  2. Does the script error occurred when edit the checkbox column or navigate to checkbox column through keyboard actions?
 
Please refer the below help documentation link to know more about EJ2- Grid control. 
 
Help documentation link : 
 
 
 
Regards, 
R.Dhivya 


UN Unknown April 26, 2018 07:26 AM UTC

Thanks for the update.

  1. I was not able to reproduce the issue in the sample you provided. Providing a sample where the issue occurs might not be possible.
  2. When setting the checkbox with the space key, the javascript error does not occur. It only happens when clicking the checkbox.


DR Dhivya Rajendran Syncfusion Team April 27, 2018 03:06 PM UTC

Hi Phil, 
  
Thanks for your update. 
  
We have tried to reproduce the reported problem in different scenario but we are not able to reproduce at our end. Could you please share the version of ej2.mins file in your application and provide the replication procedure it will be more helpful for us to provide a better solution as soon as possible.   
  
  
Regards, 
R.Dhivya  


UN Unknown April 27, 2018 03:46 PM UTC

The ej2.min.js file seems to be the latest version available, I just embed it like this:



For the reproduction in my project:
  1. Open the site with the grid.
  2. Start edit mode for the first row (double click or click and "edit" in toolbar.
  3. Click the column with the boolean, displayed as a checkbox. The error appears in the browser's console.

I am using the latest version of Chrome.

Update:
The error appears in Chrome and Edge but not in Firefox.


Thank you for investigation this issue.

MF Mohammed Farook J Syncfusion Team April 30, 2018 02:01 PM UTC

Hi Phil, 

Query:  
For the reproduction in my project: 
  1. Open the site with the grid.
  2. Start edit mode for the first row (double click or click and "edit" in toolbar.
  3. Click the column with the boolean, displayed as a checkbox. The error appears in the browser's console.
 
We unable to find any attachments /  hosted link for your updates. Could you please provide your project hosted link or sample project for reproducing the issue. 
 
Regards, 
J.Mohammed Farook 


UN Unknown April 30, 2018 02:24 PM UTC

There seems to be a misunderstanding. I did not attach any files nor provide a link to a hosted repository.

These steps are just for reproducing the issue in my project.
As I stated before, I have no possibility to provide you with a sample where this issue can be reproduced.

If there is nothing more you can do, then this issue can be closed.
Maybe the issue will not occur anymore when updating to a newer version.

MF Mohammed Farook J Syncfusion Team May 1, 2018 12:07 PM UTC

Hi Phil,

Thanks for your update and if you have faced any issue please let me know.

Regards,
J.Mohammed Farook

Loader.
Up arrow icon