Editable Checkbox in Angular ejs-grid Control.

[Sarvana]

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]

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 . 

 

Sample : https://stackblitz.com/edit/angular-wwe1ze?file=normal-edit.html 

 

This is not meet your requirement could you please share the more details about your requirement. 

 

Regards, 

J Mohammed Farook 

[Sarvana]

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]

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 

   }  

} 

 

 

Sample link: https://stackblitz.com/edit/angular-wwe1ze-jf4xsz?file=normal-edit.component.ts  

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S. 

[Sarvana]

Dear Team,

 Thanks for the solution, now its working fine.  

[Venkatesh Ayothi Raman]

Hi Saravana, 

Thanks for the feedback. 

We are very happy to hear your requirement is achieved. 

Regards,
Venkatesh Ayothiraman. 

[James]

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]

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> 

Sample Link: https://stackblitz.com/edit/angular-wwe1ze-szs3hb?file=normal-edit.component.ts 

Documentation Link: https://ej2.syncfusion.com/documentation/api/grid/#updatecell 

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

Regards, 

R.Dhivya 

[Dayakar Reddy]

Hi,

Can i select only one checkbox in the grid view in the below example? i mean not single row selection,  i mean only one checkbox should be selected in the grid always.

Sample link: https://stackblitz.com/edit/angular-wwe1ze-jf4xsz?file=normal-edit.component.ts  

Thanks,

Dayakar

[Thiyagu Subramani]

Hi Dayakar, 

Thanks for contacting Syncfusion support. 

Query: Can i select only one checkbox in the grid view in the below example? i mean no single row selection,  i mean only one checkbox should be selected in the grid always. 

 

Before proceeding this, we need know below details then only we can provide the appropriate solution as soon as possible. 

1. Can i select only one checkbox in the grid view – Are you want to show only one selected checkbox in Grid view once in a time ? i.e. If we select other checkbox in Grid, are you want deselect the previously selected checkbox in Grid or not ? Explain briefly? 

2. No single row selection, i mean only one checkbox should be selected in the grid always – If we click the checkbox, are you don’t want to select the rows in Grid ? You want to select the checkbox only?  

3. UI representation of your exact requirement? 

4. In your reported sample, we have rendered checkbox and maintained checkbox state based verified field (Boolean field) and its value respectively. So we have modified DB value based on checked state using setCellValue. Now we have rendered checkbox for without field column using columnTemplate and maintained only on checkbox selected case using checkbox change event. its ok for you ? Please confirm to us. 

Sample link: https://stackblitz.com/edit/angular-wwe1ze-1kdkmb?file=normal-edit.component.ts 

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

Regards, 

Thiyagu S. 

[Dayakar Reddy]

1. Can i select only one checkbox in the grid view – Are you want to show only one selected checkbox in Grid view once in a time ? i.e. If we select other checkbox in Grid, are you want deselect the previously selected checkbox in Grid or not ? Explain briefly? 

Ans: yes we want to show only one selected checkbox. yes if we select one it should deselect the previously selected checkbox.

2. No single row selection, i mean only one checkbox should be selected in the grid always – If we click the checkbox, are you don’t want to select the rows in Grid ? You want to select the checkbox only?  

Ans:  yes we want to select only the checkbox not the row.

3. UI representation of your exact requirement? 

Ans: look like the example on stackblitz

4. In your reported sample, we have rendered checkbox and maintained checkbox state based verified field (Boolean field) and its value respectively. So we have modified DB value based on checked state using setCellValue. Now we have rendered checkbox for without field column using columnTemplate and maintained only on checkbox selected case using checkbox change event. its ok for you ? Please confirm to us. 

Ans : it is okay for us, but when we select the checkbox it should also update the data source as well.

[Sujith Kumar Rajkumar]

Hi Dayakar, 

 

Thanks for sharing the details. 

 

Based on the query and provided sample we could see that one of your requirement is to disable row selection on clicking the checkbox. Since you have enabled edit on single row click we suggest you to achieve this requirement by disabling the allowSelection property in the Grid as demonstrated in the below code snippet, 

 

<ejs-grid #grid [dataSource]='data' [allowSelection]='false'></ejs-grid> 

 

And your requirement of having only one checkbox to be checked at a time(uncheck previous checked checkbox and update the value in data source) can be achieved by finding the checkbox field which has ‘true’ value in the data source, changing it to ‘false’ and then calling the Grid’s refreshColumns method. This is demonstrated in the below code snippet, 

 

// Checkbox change event handler 

checkboxChange(args: any) { 

    var verIndex; 

    // Retrieve the index which has previous checked value 

    this.grid.dataSource.forEach((dat, index) => { if (dat["Verified"] === true) { verIndex = index } }); 

    if (verIndex !== undefined) { 

        // Update the checkbox field value for that row and refresh the Grid columns 

        this.grid.dataSource[verIndex]["Verified"] = false; 

        this.grid.refreshColumns(); 

    } 

} 

 

If you have all the records displayed in the Grid without any paging, then instead of directly changing the data source you can use the setCellValue approach(as suggested in our previous response in the forum) to achieve this requirement. But since you have paging in the shared sample, you would have to update the value in the data source and then refresh the Grid in order to make the changes. This is its default behavior. 

 

Note: This will work only for local data since the entire Grid data cannot be accessed when using remote data(as it works on basis of on-demand loading) with paging. 

 

We have prepared a sample based on this for your reference. Please find it below, 

 

Sample: https://stackblitz.com/edit/angular-wwe1ze-3cyyzp?file=normal-edit.html 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R