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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Editable Checkbox in Angular ejs-grid Control.

Thread ID:

Created:

Updated:

Platform:

Replies:

141197 Nov 29,2018 11:20 AM UTC Feb 3,2020 12:24 PM UTC Angular - EJ 2 7
loading
Tags: Grid
Sarvana
Asked On November 29, 2018 11:20 AM UTC

I have grid control, in the grid, I need a column with a checkbox. I am able to display the checkbox in the grid column. but am not able to check or uncheck the checkbox in the grid control. how to do this. 

 <e-column field='Paid'  headerText='Fee Status' width=60 type="boolean" displayAsCheckBox='true'></e-column>

by using this code am displaying the checkbox. So this field coming from the data source which has the Fee status true or false.

Mohammed Farook J [Syncfusion]
Replied On November 29, 2018 11:50 AM UTC

Hi Sarvana, 
 
Thanks for contacting Syncfusion support. 
 
 
We have created a sample ‘Grid with can show checkbox for boolean column  while rending and edit state’. Please find the code example and sample for your reference. 
 
 
 
   <ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 
            <e-column field='CustomerID' headerText='Customer ID' width='120' [validationRules]='customeridrules'></e-column> 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column> 
            
            <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column> 
             <e-column field='Verified' editType='booleanedit'  headerText='Fee Status' width=60 type="boolean" displayAsCheckBox='true'></e-column> 
        </e-columns> 
         
    </ejs-grid> 
 
 
 
 
While set editType as ”booleanedit” grid can show the checkbox while edit state . 
 
 
This is not meet your requirement could you please share the more details about your requirement. 
 
Regards, 
J Mohammed Farook 


Sarvana
Replied On November 30, 2018 11:10 AM UTC

This looks like the checkbox in the grid is not enabled mode, we have to double-click to change the checkbox to uncheck or check. How to show the visible checkbox in the grid and single click to change the from unchecking or check.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 3, 2018 08:52 AM UTC

Hi Sarvana, 
 
Query: This looks like the checkbox in the grid is not enabled mode, we have to double-click to change the checkbox to uncheck or check. How to show the visible checkbox in the grid and single click to change the from unchecking or check. 
 
Based on your requirement, we have modified the sample. Here, we have achieved your requirement by using column template. We have perform check and uncheck operation in single click on the checkbox. Please find the code example and sample for your reference. 
 
[code example] 
[.html] 
 
<div class="control-section"> 
    <ejs-grid #grid [dataSource]='data' (dataBound)='dataBound($event)' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 
            <e-column field='CustomerID' headerText='Customer ID' width='120' [validationRules]='customeridrules'></e-column> 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column> 
 
            <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column> 
            <e-column field='Verified' headerText='Fee Status' editType='booleanedit' width=60 type="boolean"> 
                <ng-template #template let-data> 
                    <div> 
                        <ejs-checkbox #checkbox [checked]='data.Verified' (change)='checkboxChange($event)'></ejs-checkbox> 
                    </div> 
                </ng-template> 
            </e-column> 
        </e-columns> 
 
    </ejs-grid> 
</div> 
 
[.component.ts] 
... 
  public ngOnInit(): void { 
    this.data = ... 
 
  } 
 
  checkboxChange(args: any) {  
        let currentRowObject: any = this.grid.getRowObjectFromUID(args.event.target.closest('tr').getAttribute('data-uid'));  
        let currentRowData: Object = currentRowObject.data;  
     
        let rowIndex: any = args.event.target.closest('td').getAttribute("index");    
        this.grid.setCellValue(currentRowData["OrderID"],"Verified",args.checked);    //save the checkbox changes 
   }  
} 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 


Sarvana
Replied On December 3, 2018 12:03 PM UTC

Dear Team,

 Thanks for the solution, now its working fine.  

Venkatesh Ayothi Raman [Syncfusion]
Replied On December 4, 2018 04:33 AM UTC

Hi Saravana, 

Thanks for the feedback. 

We are very happy to hear your requirement is achieved. 

Regards,
Venkatesh Ayothiraman. 


James
Replied On February 1, 2020 09:50 PM UTC

Hello, the solution proposed does not register the field as being changed. So if we are in batch mode, normally when a field is changed it is highlighted green, and then an 'update' button can be activated. However, changing the check box does not cause it to be highlighted green. How do we solve this?

Dhivya Rajendran [Syncfusion]
Replied On February 3, 2020 12:24 PM UTC

Hi James, 

Query:  changing the check box does not cause it to be highlighted green in batch mode, 

We have analyzed your query and prepared sample based on your requirement. In that sample we have used the updateCell method to update the changes in batch edit mode. 
In the updateCell method we have passed the row index , field name and the checkbox state, then the cell will be in before saving state and the update and cancel buttons in the toolbar also enabled. When update button clicked the current checkbox value will be updated in the datasource. We have shared the sample and the documentation for your reference. 
 
Code snippet: 
normal-edit.component.ts       
 
  checkboxChange(args: any) { 
    let currentRowObject: any = this.grid.getRowObjectFromUID(args.event.target.closest('tr').getAttribute('data-uid')); 
    let currentRowData: Object = currentRowObject.data; 
    let rowIndex: any = args.event.target.closest('td').getAttribute("index"); 
    if (this.grid.editSettings.mode === 'Normal') { 
      this.grid.setCellValue(currentRowData["OrderID"], "Verified", args.checked); 
    } else if (this.grid.editSettings.mode === 'Batch') { 
      this.grid.editModule.updateCell(rowIndex, "Verified", args.checked); 
    } 
  } 

normal-edit.html 

<e-column field='Verified' headerText='Fee Status' editType='booleanedit' width=60 type="boolean"> 
               <ng-template #template let-data> 
                    <div> 
                        <ejs-checkbox #checkbox [checked]='data.Verified' (change)='checkboxChange($event)'></ejs-checkbox>  
                    </div> 
                </ng-template> 
             </e-column> 



Please get back to us, if you need further assistance. 

Regards, 
R.Dhivya 


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