Single click editable checkboxes with copy past functionnal

[Willemin]

Hello, I would like to be able to modify the boolean values of my grid with only one click rather than having to double click.

I would also like to be able to copy and paste the values of the grid. When we try to copy and paste the boolean values displayed in the checkbox, we don't copy anything.

Another similar thead already exists, but you can't copy and paste its checkbox values (https://www.syncfusion.com/forums/142759/how-to-enable-checkbox-column-edit-with-single-click-when-using-dynamic-columns-in-grid).

Thank you in advance for your answer.

Attachment: test_44b4b1c5.zip

[Rajapandiyan Settu]

Hi Willemin, 

Thanks for contacting Syncfusion support. 

You can achieve your requirement by using columnTemplate feature of EJ2 Grid. By using this feature we have rendered the checkbox in the column. When you change the state of check element, the change event will be triggered. In that event, we manually update the cell value using updateCell method. find the below code example and sample for your reference. 

columnTemplate: https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-template 

change event of CheckBox: https://ej2.syncfusion.com/angular/documentation/api/check-box/#change 

[app.component.html] 

 

<ejs-grid #grid [dataSource]='dataSource' (cellEdit)="cellEdit($event)" height='400px'> 

        <e-columns> 

                ---- 

                <e-column field='masculin'> 

                        <ng-template #template let-data> 

                                <ejs-checkbox [checked]="data.masculin" (change)="checkBoxChange($event)"> 

                                </ejs-checkbox> 

                        </ng-template> 

                </e-column> 

        </e-columns> 

</ejs-grid> 

 

[app.component.ts] 

 

  checkBoxChange(args: any){ 

     // get the row details using the target element 

    var rowInfo: any = this.grid.getRowInfo(args.event.target.closest("td")) 

     // update the cell value 

    this.grid.updateCell(rowInfo.rowIndex, rowInfo["column"]["field"], args.checked);  // updateCell (rowIndex, field, value) 

  } 

  cellEdit(args: any){ 

    if(args.columnName == "masculin"){ 

       // prevent the edit action on double click 

      args.cancel = true; 

    } 

  } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/test-1727786418.zip 

Query #2: When we try to copy and paste the boolean values displayed in the checkbox, we don't copy anything. 

When you copy the values in the Grid, it only copy the innerText of the cell. It does not copy the value of the custom element rendered in the Grid column. Since this is the intended behavior of EJ2 Grid. 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S