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
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. Angular - EJ 2
  4. Editing Grid

Editing Grid

Hi Team,

Editing Grid has options Add,Edit,Delete,Update,Cancel in Top Left currently.
Can we customize the position of those button(Option) as we we want in the grid.
Example Add button in Top Right of the Grid and Save(Update as one),Delete,Cancel in Bottom Right of the Grid.
Can you please guide on this.

Regards,
Ranjith KB

31 Replies
PS Pavithra Subramaniyam Syncfusion Team January 4, 2019 06:26 AM UTC

 
Greetings from Syncfusion. 
 
Query :  Example Add button in Top Right of the Grid and Save(Update as one),Delete,Cancel in Bottom Right of the Grid. 
 
We have analyzed your query and we have prepared a sample with a toolbar on top right and bottom right with required buttons. In the below sample, we have rendered a custom toolbar with save, delete and cancel buttons and we have handled the CRUD operations through the clicked event of the toolbar component using grid CRUD methods. Please refer to the below sample and documentation for your reference, 
 
Code Example:  
 
[.html] 
<ejs-grid #batchgrid id='Batchgrid' (created)="created()" [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 
            <e-columns> 
             .   .   . 
            </e-columns> 
        </ejs-grid> 
        <div class="e-grid"> 
   // for Bottom Right position with custom Toolbar  
<ejs-toolbar id="toolbar" (clicked)=" clicked($event)"> 
          <e-items> 
            <e-item prefixIcon='e-btn-icon e-update e-icons e-icon-left' tooltipText='Save' text='Save'></e-item> 
            <e-item prefixIcon='e-btn-icon e-delete e-icons e-icon-left' tooltipText='Delete' text='Delete'></e-item> 
            <e-item prefixIcon='e-btn-icon e-cancel e-icons e-icon-left' tooltipText='Cancel' text='Cancel'></e-item> 
          </e-items> 
        </ejs-toolbar> 
        </div>... 
[.ts] 
... 
created(){ 
      this.grid.element.querySelector('.e-toolbar-items').style.float = 'right';   // for Top Right position with default Grid Toolbar items. 
    } 
... 
    clicked(args){ 
      if(args.item.text == 'Save') { 
        if(this.grid.editModule.getBatchChanges().changedRecords.length || this.grid.editModule.getBatchChanges().addedRecords.length || this.grid.editModule.getBatchChanges().deletedRecords.length) 
        this.grid.endEdit(); 
      } 
      else if(args.item.text == 'Delete') { 
        this.grid.deleteRecord() 
      } 
      else { 
        this.grid.editModule.batchCancel() 
      } 
    } 
... 
 
                                 
 
                                https://ej2.syncfusion.com/angular/documentation/api/grid#deleterecord 
                                https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#batchcancel 
                                https://ej2.syncfusion.com/angular/documentation/api/toolbar#clicked  
 
Please get back to us for further assistance. 
 
Regards, 
  
Pavithra S. 


RA Ranjith January 4, 2019 10:22 AM UTC

Hi Team,
Thanks for for your assistance on this.
When we incorporated same editable grid in popup ,The Save,Delete,Cancel Buttons were aligned to left even though we included below code.We suspect this is because of popup window width.
this.grid.element.querySelector('.e-toolbar-items').style.float = 'right';

and also We needed buttons with specific color without icons for Add,Save,Delete and Cancel could you please assist on this.
And that would be great if you provide Enable/disabling the button property Ex;When Add button is clicked the delete buttons should be Disabled.

We have attached screenshots how we got Editable grid  in popup window.

Regards,
Ranjith KB

Attachment: editGrid_8521f762.rar

PS Pavithra Subramaniyam Syncfusion Team January 7, 2019 06:56 AM UTC

Hi Ranjith, 
 
Greetings from Syncfusion. 
 
Query #1:  The Save,Delete,Cancel Buttons were aligned to left even though we included below code. 
this.grid.element.querySelector('.e-toolbar-items').style.float = 'right';     
 
We have analyzed your query and the above code is for the default grid toolbar items to be aligned right. To align the custom toolbar, we suggest to use the align property of the cutom toolbar items as shown below, 
 
Code Example:  
 
[.html] 
... 
<ejs-toolbar #tool id="toolbar" (clicked)="clicked($event)"> 
          <e-items> 
            <e-item cssClass='e-save e-overlay' align='Right' tooltipText='Save' text='Save'></e-item> 
            <e-item cssClass='e-delete' align='Right' tooltipText='Delete' text='Delete'></e-item> 
            <e-item cssClass='e-cancel e-overlay' align='Right' tooltipText='Cancel' text='Cancel'></e-item> 
          </e-items> 
        </ejs-toolbar> 
... 
 
 
Query #2:  We needed buttons with specific color without icons for Add,Save,Delete and Cancel could you please assist on this 
 
We have analyzed your query and we suggest to set the type property to the input element. Please refer to the below sample for your reference, 
 
Code Example:  
 
[.ts] 
... 
<ejs-toolbar #tool id="toolbar" (clicked)="clicked($event)"> 
          <e-items> 
            <e-item cssClass='e-save e-overlay' tooltipText='Save' text='Save'></e-item> 
            <e-item cssClass='e-delete' tooltipText='Delete' text='Delete'></e-item> 
            <e-item cssClass='e-cancel e-overlay' tooltipText='Cancel' text='Cancel'></e-item> 
          </e-items> 
        </ejs-toolbar> 
... 
... 
.e-save .e-tbar-btn{ 
      background: greenyellow; 
    } 
    .e-delete .e-tbar-btn{ 
      background: grey; 
    } 
    .e-cancel .e-tbar-btn{ 
      background: yellow; 
    } 
 
    .e-toolbar-item::before{ 
      display: none; 
    } 
... 
 
 
Query #3:  Ex;When Add button is clicked the delete buttons should be Disabled. 
 
In the below sample, we have handled the default toolbar disable states using beforeBatchSave, batchCancel, batchDelete and cellSave events of the grid component. Please refer to the below sample and documentation for your reference, 
 
Code Example:  
 
[.ts] 
... 
beforeBatchSave(args){ 
        this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[0].classList.add('e-overlay'); 
        this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[2].classList.add('e-overlay'); 
    } 
    batchCancel(args){ 
      this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[0].classList.add('e-overlay'); 
        this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[2].classList.add('e-overlay'); 
    } 
    batchDelete(args){ 
      this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[0].classList.remove('e-overlay'); 
        this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[2].classList.remove('e-overlay'); 
    } 
    cellSave(args){ 
      this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[0].classList.remove('e-overlay'); 
        this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[2].classList.remove('e-overlay'); 
    } 
... 
 
 
                                https://ej2.syncfusion.com/angular/documentation/api/grid/#batchcancel  
                                https://ej2.syncfusion.com/angular/documentation/api/grid/#batchdelete 
                                https://ej2.syncfusion.com/angular/documentation/api/grid/#beforebatchsave  
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


RA Ranjith January 7, 2019 09:39 AM UTC

Hi Team,
This is was really helpful,and worked great for us,Except Add button in Top Right remains same as before(Button color not able change and Icon not able to hide).

We had one more assistance regarding checkbox edit in grid,As we have included checkbox in Editable grid,
When we  try to perform checked or  unchecked in  the Checkbox ;the first checkbox in the grid opens a text-box(containing objectobject init).
And also only checkbox operations will not get saved.
Please Kindly assist on this.
We have attached output regarding checkbox issue and code of the Html Grid is attached.

Regards,
Ranjith

Attachment: demo_11f274b5.rar

PS Pavithra Subramaniyam Syncfusion Team January 8, 2019 06:19 AM UTC

Hi Ranjith, 
 
Greetings from Syncfusion. 
 
Query #1:  Add button in Top Right remains same as before(Button color not able change and Icon not able to hide). 
 
We have analyzed your query and we have used created event of this grid to achieve your requirement. In the below sample, we have used cssClass property to apply background color as per your requirement, 
 
Code Example:  
 
[.ts] 
... 
created(){ 
      this.grid.toolbarModule.toolbar.items[0].align = 'Right'; 
      this.grid.toolbarModule.toolbar.items[0].prefixIcon=''; 
      this.grid.toolbarModule.toolbar.items[0].cssClass = 'e-customadd'; 
    } 
... 
[index.html] 
... 
<style> 
  .e-customadd .e-tbar-btn{ 
    background: red; 
  } 
</style> 
... 
 
 
Query #2:  When we  try to perform checked or  unchecked in  the Checkbox ;the first checkbox in the grid opens a text-box(containing objectobject init). 
And also only checkbox operations will not get saved. 
 
We have analyzed your query and from the code snippet that you have shared with us, we suspect that field property is not provided in the columns is the cause of this issue. So to edit columns in the grid field property must be defined. Please update your check box columns with respective fields to perform edit operation in the column template. 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S.  


RA Ranjith January 18, 2019 02:37 PM UTC

Hi Team,
The  previous query whatever we had on Editing Grid worked great for us; We are thankful for your assistance.

We have observed that on delete action there is no Prompt(Alert) before delete operation,Please assist on this.

Also after delete operation we have to click on save for deleting the the particular record,we want it as delete operation should delete record from list,shouldn't expect to click on Save  for Delete operation to complete,Please Help us on this.

# When the Grid is empty and we try to add a row which gives a row with fields(saying [object object]),but when we have some row in grid and try to add a row [object object] entry in the field will not come,Please assist on this(We have used field property).

The output is attached below.

Regards,
Ranjith



Attachment: pic2_8f06e476.rar

PS Pavithra Subramaniyam Syncfusion Team January 21, 2019 08:39 AM UTC

Hi Ranjith, 
 
We are happy to hear that the provided information helps you. 
 
Query #1: We have observed that on delete action there is no Prompt(Alert) before delete operation,Please assist on this. 
 
You can achieve your requirement by enabling the grid.editSettings.showDeleteConfirmDialog property. Please refer to the below code example and documentation link for more information. 
 
[component.ts] 
export class BatchEditComponent implements OnInit { 
 
    public ngOnInit(): void { 
        this.data = orderData.slice(0,5); 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch', showDeleteConfirmDialog : true}; 
    } 
} 
 
 
Query #2: we want it as delete operation should delete record from list,shouldn't expect to click on Save  for Delete operation to complete 
 
You can save the Grid after deleting the record by calling the endEdit() method in batchDelete event. Please refer to the below code example, Documentation link and sample link for more information. 
 
[component.ts] 
@Component({ 
    selector: 'control-content', 
    template: '<div class="control-section"> 
        <ejs-grid #batchgrid id='Batchgrid' (created)="created()" [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (batchDelete)="batchDelete($event)" > 
            <e-columns> 
            .    .    .   
            </e-columns> 
        </ejs-grid> 
</div> 
'  
}) 
export class BatchEditComponent implements OnInit { 
    .  .  . 
               
    batchDelete(args){ 
         .   .   . 
        this.grid.endEdit(); 
    } 
     
    clicked(args){ 
      if(args.item.text == 'Save') { 
        if(this.grid.editModule.getBatchChanges().changedRecords.length || this.grid.editModule.getBatchChanges().addedRecords.length || this.grid.editModule.getBatchChanges().deletedRecords.length) 
        this.grid.endEdit(); 
      } 
      else if(args.item.text == 'Delete') { 
        this.grid.deleteRecord(); 
      } 
      else { 
        this.grid.editModule.batchCancel() 
      } 
    } 
 
} 
 
                              https://ej2.syncfusion.com/angular/documentation/api/grid#batchdelete  
 
 
Query #3: When the Grid is empty and we try to add a row which gives a row with fields(saying [object object]),but when we have some row in grid and try to add a row [object object] entry in the field will not come 
 
By default Grid Edit form will be rendered based on the column type. while the Grid dataSource is empty then you need to provide the column.type property to overcome the reported behavior. Please refer to the below code example, documentation link and sample link. 
 
[component.html] 
<ejs-grid #batchgrid id='Batchgrid' [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' type='number' [validationRules]='orderidrules'></e-column> 
                <e-column field='CustomerID' headerText='Customer ID' width='120' [validationRules]='customeridrules' type='string'></e-column> 
                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules' type='number'></e-column> 
                <e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' editType='datepickeredit' textAlign='Right' type='date'></e-column> 
                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams' type='string'></e-column> 
            </e-columns> 
        </ejs-grid> 
 
 
 
Regards, 
Pavithra S. 


RA Ranjith January 22, 2019 08:11 AM UTC

Hi Team,
The queries whatever we had till now all fixed in Editable grid,we are thankful for your detailed assistance.

We  are facing a small glitch in Editable Grid,When we try to Save record initially,The OK button of Confirm-dialog for Save Doesn't work and then entire editable grid freezes as we are not even able to click on Add button and all,But this Issue is not there when we have already some record in Grid,Please Kindly assist on this.
We have gone through documentations which didn't work for us,Please Kindly help.

Regards,
Ranjith  

PS Pavithra Subramaniyam Syncfusion Team January 22, 2019 09:38 AM UTC

Hi Ranjith, 

Greetings from Syncfusion. 
 
Query : When we try to Save record initially,The OK button of Confirm-dialog for Save Doesn't work and then entire editable grid freezes 
 
We have analyzed your query but we are unable to reproduce the reported issue at our end. So please provide us the below information, it will help us provide better solution as soon as possible. 


  1. Share your console window if any errors occurred?
  2. Share the exact replication procedure with the edit mode you are using to reproduce the reported issue?
  3. Share full grid code example?
  4. Please try to reproduce the reported issue in the provided sample?
 
Regards,  
Pavithra S.   


RA Ranjith January 22, 2019 10:03 AM UTC

Hi Team,
Please find information below

Regards,
Ranjith

Attachment: edit_grid_ca1782b0.rar

RA Ranjith January 22, 2019 10:27 AM UTC

Hi Team,
We have Shared the code below,
https://stackblitz.com/edit/angular-tj5fqr?file=src%2Fapp%2Fapp.component.html

Regards,
Ranjith


               

PS Pavithra Subramaniyam Syncfusion Team January 23, 2019 05:09 AM UTC

Hi Ranjith, 
 
Thanks for your update. 
 
Query: Editable Grid,When we try to Save record initially,The OK button of Confirm-dialog for Save Doesn't work 
 
We have analyzed your query and from the information you have shared with us, we suspect that defining grid dataSource as null is the cause of this issue. By default, the data grid accepts the array of objects data type. So if your requirement is to not set datasource initially, then we suggest to define it as an empty array as shown below. Please refer to the sample and documentation provided below, 
 
Code Example:  
 
[.ts] 
... 
CoverageList = []; 
... 
 
 
 
Please get back to us for further assistance.  
 
Regards,  
Pavithra S.   


RA Ranjith January 23, 2019 08:11 AM UTC

Hi Team,
The Solution you have given resolved our issue,we are thankful for your assistance.

How  we can get the datasource values(Array values after Save or Delete) after the operations. As we trying to push the resulted array values through reactive forms to the API;We tried assigning CoverageList array which is not containg the Saved or deleted Record.

#We wanted to change the text 'Add' button,How we can achive this,Please assist on this.

Sample :https://stackblitz.com/edit/angular-wymn4r?file=src%2Fapp%2Fapp.component.ts

Regards,
Ranjith

PS Pavithra Subramaniyam Syncfusion Team January 24, 2019 12:01 PM UTC

 
Greetings from Syncfusion. 
 
Query: How  we can get the datasource values(Array values after Save or Delete) after the operations 
 
We have analyzed your query and we suggest to use the actionComplete event to get the dataSource after the CRUD operations. In the below sample we have get the dataSource length in the actionComplete event when requestType is ‘batchsave’. Please refer to the below sample and documentation for your refernce, 
 
Code Example:  
 
[.ts] 
... 
actionComplete(args){ 
    if(args.requestType == 'batchsave'){ 
      console.log(this.grid.dataSource.length); 
    } 
  } 
... 
 
Query #2: We wanted to change the text 'Add' button,How we can achive this 
 
We have analyzed your query and we suggest to use the load method to achieve your requirement. Please refer to the below sample and documentation for your reference, 
 
Code Example:  
 
[.ts] 
... 
L10n.load({ 
    'de-DE': { 
        'grid': { 
            'Add': 'customName' 
        } 
    } 
}); 
... 
 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


RA Ranjith January 24, 2019 01:08 PM UTC

Hi Pavithra S,

We had question on last query Changing the Text of  'Add' button to 'Add new  Coverage'  ;Is it possible to achieve this without localization/globalization approach
That would be helpful if you assist on this.

 As you suggested actionComplete event to get the dataSource after the CRUD operations,but the actionComplete event will trigger when requestType is ‘batchsave’, Do we have requestType for delete? as we tried  soon after delete  actionComplete  will not trigger with requestType  'batchdelete',
Please assist on this.

#It is also observed that after every deletion of record we have hit on 'Save' button in order to Delete operation to complete, Please assist on this so that we don't have to  hit on 'Save' button after each delete  opertaion.

We really appreciate your effort on this.

Regards,
Ranjith




PS Pavithra Subramaniyam Syncfusion Team January 25, 2019 12:27 PM UTC

Hi Ranjith, 

Greetings from Syncfusion. 

Query #1: Is it possible to achieve this without localization/globalization approach 
Query #2: Do we have requestType for delete? as we tried  soon after delete  actionComplete  will not trigger with requestType  'batchdelete',  
 
We have analyzed your query and we suggest to use the dataBound event to access the toolbar item text with your custom name. We will also get the updated data source when update or delete operation is made. Please refer to the below sample for your reference, 

Code Example:  

[.ts] 
... 
dataBound(args){ 
    if(this.changeName){ 
      this.grid.toolbarModule.toolbar.items[0].text = "customName"; 
      this.changeName = false; 
    } 
      console.log(this.grid.dataSource.length); 
  } 
... 
 
 
Query #3: that after every deletion of record we have hit on 'Save' button in order to Delete operation to complete, 
 
We have analyzed your query and we suggest to use the batchDelete event to perform delete and save operations at once. Please refer to the below sample for your reference, 

Code Example:  

[.ts] 
... 
batchDelete(args){ 
    this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[0].classList.remove('e-overlay'); 
      this.toolbarComp.element.querySelectorAll('.e-toolbar-item')[2].classList.remove('e-overlay'); 
      console.log(this.grid.editModule.getBatchChanges()); 
      this.grid.editSettings.showConfirmDialog = false; 
        setTimeout(()=>this.grid.endEdit(),0); 
        setTimeout(()=>this.grid.editSettings.showConfirmDialog = true,10); 
 } 
... 
 

Regards, 
Pavithra S. 
 


RA Ranjith January 28, 2019 07:25 AM UTC

Hi Pavithra S,

The Assistance on Editable query  helped us a lot and We're really appreciate your in detail assistance on our query.
 
Regards,
Ranjith

PS Pavithra Subramaniyam Syncfusion Team January 28, 2019 07:36 AM UTC

Hi Ranjith, 
 
Thanks for your update. 
 
We are happy to hear that the provided information was helpful. 
 
Please contact us if you need any further assistance. As always, we will be happy to assist you. 
 
Regards, 
Pavithra S. 


RA Ranjith January 30, 2019 07:43 AM UTC

Hi Team,

Can we modify the default message which is displayed for validation of field in Editable grid,Please assist on this.

Also we wanted to modify the messages of Dialog box on Save,Delete,Cancel,Would you please help on this!

Sample: https://stackblitz.com/edit/angular-wqtffd?file=src%2Fapp%2Fapp.component.ts


Regards,
Ranjith

PS Pavithra Subramaniyam Syncfusion Team January 31, 2019 11:02 AM UTC

 
Greetings from Syncfusion. 
 
Query: Can we modify the default message which is displayed for validation of field in Editable grid 
 
We have checked your query and You can achieve your requirement by using the following way. Please refer to the below code example, documentation link and sample link. In this sample we have provided the Localized error message in the column.validationRules itself. 
 
Code Example:  
 
[.ts] 
... 
created(){ 
    ... 
      this.grid.getColumns()[0].validationRules = { required: [true, 'Este campo es requerido']}  
  }... 
 
 
Query #2: Also we wanted to modify the messages of Dialog box on Save,Delete,Cancel,Would you please help on this! 
 
We have checked your query and we can customize the grid CRUD messages by overriding the default locale text. Please refer to the below sample and documentation for your reference, 
 
Code Example:  
 
[.ts] 
... 
L10n.load({ 
    'en-US': { 
        'grid': { 
            'Add': 'customName', 
            'BatchSaveConfirm': 'custom save messages', 
            'ConfirmDelete': 'custom delete', 
            'CancelEdit': 'custom edit', 
        } 
    } 
}) 
... 
 
Note: By default, locale:en-US is used in the grid as shown in the below sample. But if you have used any other localization, you can just replace the “en-US” with the used code. 
 
 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


RA Ranjith February 1, 2019 08:11 AM UTC

Hi Pavithra S,

We appreciate the coordination you have given,It worked for us.

Thanks and Regards,
Ranjith KB

PS Pavithra Subramaniyam Syncfusion Team February 1, 2019 09:27 AM UTC

Hi Ranjith,  

Thanks for your update.  

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 


RA Ranjith February 25, 2019 08:05 AM UTC

Hi Team,

How can we put delete button in each row instead in bottom of Editable Grid ,Kindly help.
We tried to put in e-column ,But the delete operation was not working



Demo Link:  https://stackblitz.com/edit/angular-n2re7t-htybsr?file=batch-editing.component.ts

Regards,
Ranjith

PS Pavithra Subramaniyam Syncfusion Team February 26, 2019 08:59 AM UTC

Hi Ranjith, 
 
You can achieve your requirement by using the command column feature of Grid component which will render buttons in each row for CRUD operation. Please refer to the below documentation link and demo link for more information. 
 
 
 
Regards, 
Pavithra S. 


RA Ranjith February 26, 2019 02:14 PM UTC

Hi Pavithra,
The document you provided helped for us, Thank you for your assistance.

Regards,
Ranjith KB

PS Pavithra Subramaniyam Syncfusion Team February 27, 2019 05:06 AM UTC

Hi Ranjith,  

Thanks for your update. 

We are happy to hear that the provided information helped you. 

Please contact us if you need any further assistance.  

Regards,  
Pavithra S. 


RA Ranjith February 28, 2019 12:39 PM UTC

Hi Pavithra S,

As we are trying to incorporate Default checked checkbox in editable grid referring the below link,
https://ej2.syncfusion.com/angular/documentation/grid/edit/

Which throws some error says type checked is assignable.
Please refer Screenshot provided for the detailed error.

We would be grateful for your assistance.

Regards,
Ranjith KB

PS Pavithra Subramaniyam Syncfusion Team March 1, 2019 07:03 AM UTC

Hi Ranjith, 
 
You can overcome the reported behavior by using the below solution in your application. Please refer to the below code example for more information. 
 
[component.ts] 
@Component({ 
  selector: 'app-root', 
  template: ' <ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'> 
      <e-columns> 
            .   .   . 
          <e-column field='Verified' headerText='Verified' editType= 'booleanedit' [edit]='boolParams' width=150></e-column> 
      </e-columns> 
      </ejs-grid>’, 
}) 
export class AppComponent implements OnInit { 
    .  .  . 
    public boolParams: {params: CheckBoxModel}; 
 
    ngOnInit(): void { 
         .  .  . 
        this.boolParams = { params: {checked: true }  }; 
    } 
} 
 
 
However, we have logged a defect report for “Using checkbox property in IEditCell type throws compilation error” and it will be available in our patch release which will be rolled out by the end of March, 2019. Until then we suggest you to use the above workaround to achieve your requirement. 
 
If you wish to receive this fix in a specific prior release product version please contact Syncfusion Support (backwards compatibility subject to technological feasibility and our Support SLA) You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link  

 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


RA Ranjith March 4, 2019 08:18 AM UTC

Hi Pavithra S,
Thank you for your assistance,The solution that you have provided worked for us.

Regards,
Ranjith KB

PS Pavithra Subramaniyam Syncfusion Team March 4, 2019 09:08 AM UTC

Hi Ranjith,  

Thanks for your update. 

We are happy to hear that the provided information helped you. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 


PS Pavithra Subramaniyam Syncfusion Team April 25, 2019 05:29 AM UTC

Hi Ranjith, 

Thanks for your patience. 
 
We have fixed the issue “Using checkbox property in IEditCell type throws compilation error”  and the fix is available from the version 17.1.38. Please refer to the below release notes for more information. 
 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon