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

How to enable checkbox column edit with single click when using dynamic columns in grid?

Hi there,

I'm using 'ejs-grid' to create dynamic columns. The code as below,

** HTML **

<ejs-grid id="myGridId" #myGrid [dataSource]='myData' [columns]='myColumns' [editSettings]='editSettings' [toolbar]='toolbar' height='100%'
(cellEdit)="cellEdit($event)" (beforeBatchAdd)="beforeBatchAdd($event)" (beforeBatchSave)="beforeBatchSave($event)">
</ejs-grid>


Load columns by setting the 'columns' property when calling a function requested by some data set.

** TS **

{ id: 'approval', field: 'approval', headerText: 'Appr', textAlign: 'Center', headerTextAlign: 'Center', width: '70'
, editType:'booleanedit', type:'boolean', displayAsCheckBox:'true' }

Enable checkbox column using above properties. (When setting 'columns' property)

- After those data bindings it will load check boxes on that specified column. But when using the edit mode (Batch edit) user need to click on twice to checked the value on check box. My requirement is, that check box column enable to change value by only one click. How to do that easily?

Note: Also I want to change checkbox value after clicking on 'Edit' button which comes in the grid toolbar. Otherwise that check box column should be non-editable.












10 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team February 18, 2019 10:47 PM

Hi Neo, 

Greetings from Syncfusion. 

Query : My requirement is, that check box column enable to change value by only one click. How to do that easily? 

We have analyzed your query and we suggest to use the columnTemplate property to achieve your requirement. In the below sample, we have rendered the checkbox component for a checkbox column using columnTemplate property and updated the grid cell values in a single click using updateCell method in the change event of the checkbox. Please refer to the below sample and documentation for your reference, 

[.html, .ts] 
<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' [columns]='columns'
        </ejs-grid> 
        <ng-template #checkboxedit let-data> 
                    <ejs-checkbox [checked]='data.Discontinued' (change)='change($event, data)'></ejs-checkbox> 
                  </ng-template> 
... 
@ViewChild('checkboxedit') public chechboxCol: any 
... 
this.columns = [ 
          {field: 'ProductID', isPrimaryKey: true, width: 120}, 
          {field: 'CategoryName', width: 120}, 
          {field: 'Discontinued', template: this.chechboxCol, width: 120}, 
          {field: 'ProductName', width: 120} 
          ] 
    } 

    change(args, rowData){ 
      this.grid.editModule.updateCell(args.event.target.closest('tr').rowIndex, 'Discontinued', args.checked); 
    } 
… 


                                https://ej2.syncfusion.com/angular/documentation/api/grid/columnDirective/#template  
                                https://ej2.syncfusion.com/angular/documentation/api/check-box/#change 
                                https://ej2.syncfusion.com/angular/documentation/api/check-box/#checked                                  

Note: ‘Edit’ item in the toolbar is supported only for the inline and dialog editing modes.  

Please get back to us for further assistance. 

Regards, 
Thavasianand S. 



NE Neo replied to Thavasianand Sankaranarayanan February 19, 2019 11:50 PM

Hi Neo, 

Greetings from Syncfusion. 

Query : My requirement is, that check box column enable to change value by only one click. How to do that easily? 

We have analyzed your query and we suggest to use the columnTemplate property to achieve your requirement. In the below sample, we have rendered the checkbox component for a checkbox column using columnTemplate property and updated the grid cell values in a single click using updateCell method in the change event of the checkbox. Please refer to the below sample and documentation for your reference, 

[.html, .ts] 
<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' [columns]='columns'
        </ejs-grid> 
        <ng-template #checkboxedit let-data> 
                    <ejs-checkbox [checked]='data.Discontinued' (change)='change($event, data)'></ejs-checkbox> 
                  </ng-template> 
... 
@ViewChild('checkboxedit') public chechboxCol: any 
... 
this.columns = [ 
          {field: 'ProductID', isPrimaryKey: true, width: 120}, 
          {field: 'CategoryName', width: 120}, 
          {field: 'Discontinued', template: this.chechboxCol, width: 120}, 
          {field: 'ProductName', width: 120} 
          ] 
    } 

    change(args, rowData){ 
      this.grid.editModule.updateCell(args.event.target.closest('tr').rowIndex, 'Discontinued', args.checked); 
    } 
… 


                                https://ej2.syncfusion.com/angular/documentation/api/grid/columnDirective/#template  
                                https://ej2.syncfusion.com/angular/documentation/api/check-box/#change 
                                https://ej2.syncfusion.com/angular/documentation/api/check-box/#checked                                  

Note: ‘Edit’ item in the toolbar is supported only for the inline and dialog editing modes.  

Please get back to us for further assistance. 

Regards, 
Thavasianand S. 


Hi Thavasianand,

Thank you very much for your quick response and answer. I have went through your code and changes done to my code. My problem has been solved successfully. But I have small issue. In the checkbox column when we double click on it, it appears the Boolean value itself. My opinion is to avoid the double click edit mode in that particular column. And please advice me to handle disable/enable column by button click event.

Highly appreciate your Syncfusion support in this forum.



NE Neo replied to Shamil Rupasinghe February 20, 2019 04:14 AM

Hi Neo, 

Greetings from Syncfusion. 

Query : My requirement is, that check box column enable to change value by only one click. How to do that easily? 

We have analyzed your query and we suggest to use the columnTemplate property to achieve your requirement. In the below sample, we have rendered the checkbox component for a checkbox column using columnTemplate property and updated the grid cell values in a single click using updateCell method in the change event of the checkbox. Please refer to the below sample and documentation for your reference, 

[.html, .ts] 
<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' [columns]='columns'
        </ejs-grid> 
        <ng-template #checkboxedit let-data> 
                    <ejs-checkbox [checked]='data.Discontinued' (change)='change($event, data)'></ejs-checkbox> 
                  </ng-template> 
... 
@ViewChild('checkboxedit') public chechboxCol: any 
... 
this.columns = [ 
          {field: 'ProductID', isPrimaryKey: true, width: 120}, 
          {field: 'CategoryName', width: 120}, 
          {field: 'Discontinued', template: this.chechboxCol, width: 120}, 
          {field: 'ProductName', width: 120} 
          ] 
    } 

    change(args, rowData){ 
      this.grid.editModule.updateCell(args.event.target.closest('tr').rowIndex, 'Discontinued', args.checked); 
    } 
… 


                                https://ej2.syncfusion.com/angular/documentation/api/grid/columnDirective/#template  
                                https://ej2.syncfusion.com/angular/documentation/api/check-box/#change 
                                https://ej2.syncfusion.com/angular/documentation/api/check-box/#checked                                  

Note: ‘Edit’ item in the toolbar is supported only for the inline and dialog editing modes.  

Please get back to us for further assistance. 

Regards, 
Thavasianand S. 


Hi Thavasianand,

Thank you very much for your quick response and answer. I have went through your code and changes done to my code. My problem has been solved successfully. But I have small issue. In the checkbox column when we double click on it, it appears the Boolean value itself. My opinion is to avoid the double click edit mode in that particular column. And please advice me to handle disable/enable column by button click event.

Highly appreciate your Syncfusion support in this forum.


Problem solved. I implemented like below to disable double click edit mode in check boxes column.

** HTML **

<ejs-grid #myGrid [dataSource]='myData' [columns]='myColumns' [editSettings]='editSettings' [toolbar]='toolbar' height='100%'
(cellEdit)="cellEdit($event)" (beforeBatchAdd)="beforeBatchAdd($event)" (beforeBatchEdit)="beforeBatchEdit($event)" (beforeBatchSave)="beforeBatchSave($event)">
</ejs-grid>

** TS **

cellEdit(args) {
if (args.columnName == "approval") {
args.cancel = true;
}
}




MS Madhu Sudhanan P Syncfusion Team February 20, 2019 04:38 AM

Hi Shamil, 
Thanks for the update. We are glad that your requirement has been achieved. 
Regards, 
Madhu Sudhanan P 



NE Neo replied to Madhu Sudhanan P February 25, 2019 02:08 AM

Hi Shamil, 
Thanks for the update. We are glad that your requirement has been achieved. 
Regards, 
Madhu Sudhanan P 


Hi Madhu / Thavasianand,

I have small things to done in this grid to complete my requirement.
  • I want to add "Edit" toolbar button. (I know in Batch edit, it doesn't support. But I want to add customized button)
  • Initial load of the Grid, batch edit should be disabled. (Checkbox column and cell double click edit mode also disabled/Non-editable)
  • When pressing on customized "Edit" button, Grid should be enable checkbox column and enable double click cell edit mode. If user clicked on "Cancel" button, the grid should comes to normal state. (Like initial load)
Note: Kindly request the answer include in Stackblitz.

Thank you.


MS Madhu Sudhanan P Syncfusion Team February 26, 2019 04:04 AM

Hi Shamil, 

Thanks for the update. 

We have modified the sample to achieve your requirement in which custom edit and delete toolbar items are used to enable/disable edit in grid and also used disabled property of the checkbox to toggle its enable state. 


<ng-template #checkboxedit let-data> 
  <ejs-checkbox [checked]='data.Discontinued' [disabled]="disabled" (change)='change($event, data)'></ejs-checkbox> 
</ng-template> 


export class BatchEditComponent implements OnInit { 
  .... 
  public disabled = true; 
  ..... 
 
  public ngOnInit(): void { 
      this.data = categoryData; 
      ... 
       this.toolbar = [{ id: 'EnableEdit', text: 'Edit'}, { id: 'CancelEdit', text: 'Cancel'}]; 
      ..... 
  } 
 
  toolbarClick(args){ 
     if (args.item.id === 'EnableEdit') {  
       this.grid.editSettings ={ allowEditing: true, allowAdding: true, mode: 'Batch' }; 
       this.disabled = false; 
    } 
    if (args.item.id === 'CancelEdit') {  
       this.grid.editSettings ={ allowEditing: false, allowAdding: false, mode: 'Batch' }; 
       this.disabled = true; 
    } 
  } 
..... 
} 



Regards, 
Madhu Sudhanan P  



NE Neo replied to Madhu Sudhanan P February 26, 2019 04:33 AM

Hi Shamil, 

Thanks for the update. 

We have modified the sample to achieve your requirement in which custom edit and delete toolbar items are used to enable/disable edit in grid and also used disabled property of the checkbox to toggle its enable state. 


<ng-template #checkboxedit let-data> 
  <ejs-checkbox [checked]='data.Discontinued' [disabled]="disabled" (change)='change($event, data)'></ejs-checkbox> 
</ng-template> 


export class BatchEditComponent implements OnInit { 
  .... 
  public disabled = true; 
  ..... 
 
  public ngOnInit(): void { 
      this.data = categoryData; 
      ... 
       this.toolbar = [{ id: 'EnableEdit', text: 'Edit'}, { id: 'CancelEdit', text: 'Cancel'}]; 
      ..... 
  } 
 
  toolbarClick(args){ 
     if (args.item.id === 'EnableEdit') {  
       this.grid.editSettings ={ allowEditing: true, allowAdding: true, mode: 'Batch' }; 
       this.disabled = false; 
    } 
    if (args.item.id === 'CancelEdit') {  
       this.grid.editSettings ={ allowEditing: false, allowAdding: false, mode: 'Batch' }; 
       this.disabled = true; 
    } 
  } 
..... 
} 



Regards, 
Madhu Sudhanan P  


Hi Madhu,

One more thing to do in that grid. I want to perform this customized tool bar as default toolbar. That means, when we press on the "Edit" button it should be disabled & "Cancel" button should be enabled. When "Cancel" button pressed, it should back to normal and cancel button operation should be perform as the default one. (Grid changes should rollback)

Thank you.


MS Madhu Sudhanan P Syncfusion Team February 26, 2019 08:06 PM

Hi Shamil, 

Thanks for the update. 

We have toggled the toolbar items as per your requirement using enableItems method of the toolbar module and also canceled batch changes on cancel click using batchCancel method. Please find the below modified sample. 


API used 

Regards, 
Madhu Sudhanan P 



NE Neo replied to Madhu Sudhanan P February 26, 2019 08:17 PM

Hi Shamil, 

Thanks for the update. 

We have toggled the toolbar items as per your requirement using enableItems method of the toolbar module and also canceled batch changes on cancel click using batchCancel method. Please find the below modified sample. 


API used 

Regards, 
Madhu Sudhanan P 


It's working. Your support is awesome. Thank you very much!


MS Madhu Sudhanan P Syncfusion Team February 27, 2019 01:39 AM

Hi Shamil, 
  
Thanks for the update. 
  
Regards, 
Madhu Sudhanan P 


Loader.
Live Chat Icon For mobile
Up arrow icon