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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

142759 Feb 18,2019 02:47 PM UTC Feb 27,2019 09:39 AM UTC Angular - EJ 2 10
loading
Tags: Grid
Neo
Asked On February 18, 2019 02:47 PM UTC

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.












Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 19, 2019 06:47 AM UTC

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. 


Neo
Replied On February 20, 2019 07:50 AM UTC

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.


Neo
Replied On February 20, 2019 12:14 PM UTC

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;
}
}



Madhu Sudhanan P [Syncfusion]
Replied On February 20, 2019 12:38 PM UTC

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


Neo
Replied On February 25, 2019 10:08 AM UTC

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.

Madhu Sudhanan P [Syncfusion]
Replied On February 26, 2019 12:04 PM UTC

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  


Neo
Replied On February 26, 2019 12:33 PM UTC

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.

Madhu Sudhanan P [Syncfusion]
Replied On February 27, 2019 04:06 AM UTC

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 


Neo
Replied On February 27, 2019 04:17 AM UTC

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!

Madhu Sudhanan P [Syncfusion]
Replied On February 27, 2019 09:39 AM UTC

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


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

;