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: November 16, 2018).
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 Dec 4,2018 04:33 AM UTC Angular - EJ 2 5
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. 


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

;