Issue in editing dynamically generated columns

Question

Hi Team,We are using grid in our application in which we are generating columns dynamically and then filling the row data. However, while editing, we are not getting events like actionbegin or celledit. Can you please check the issue.Below is the code snippet for the same:HTML:

Data: this.data = [ { "1": 123, "2": "ABC" }, { "1": 456, "2": "DEF" }, { "1": 789, "2": "XYZ" } ]; this.columnDef = [ { "id": 1, "name": "Product Id", "type": "number" }, { "id": 2, "name": "Product Name", "type": "string" } ];

Praveenkumar Gajendiran · Accepted Answer

Hi Rohit, Thanks for your update.Based on your query we suspect that you want to render a Password Textbox component to edit the column, for this we suggested you use cellEditTemplate feature of Grid to achieve your requirement. The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, destroy functions. create function is used to create the element at time of initialization. write function is used to create custom component or assign default value at time of editing. read function is used to read the value from component at time of save. destroy function is used to destroy the component By using this feature, we rendered the Password Textbox component to edit the Password field. The create, write, read and destroy functions will be triggered for each time When you editing a row. Please refer the below code example and sample for more information, Code Example:

……..

[app.component.ts]

export class AppComponent {

@ViewChild("normalgrid")

public grid: GridComponent;

public editParams: IEditCell;

public elem: HTMLElement;

public textBox: TextBox;

public ngOnInit(): void {

this.dpParams = { //CellEditTemplate

create: () => { //create function is used to create the element at time of initialization

this.elem = document.createElement("input");

return this.elem;

},

read: () => { // read function is used to read the value from component at time of save.

return this.textBox.value;

},

destroy: () => { //destroy function is used to destroy the component.

this. textBox.destroy();

},

write: (args: any) => { //write function is used to create custom component or assign default value at time of editing.

this.textBox = new TextBox({ //TextBox component

placeholder: 'Enter the Password',

type: 'Password',

floatLabelType: 'Auto'

});

this.textBox.appendTo(this.elem);

}

};

}

Rajapandiyan Settu · Answer

Hi Rohit,   
   
Thanks for contacting Syncfusion support.  
  
We have prepared a sample with the provided code example and the actionBegin event (requestType as beginEdit) will be triggered successfully when editing a row in Grid. To perform the edit action in Grid, select a row and click the Edit button in the toolbar or double click the row in Grid.  
  
Sample:https://stackblitz.com/edit/angular-mrzrt9-rsd66w?file=app.component.html  
  
When we perform any grid actions like CRUD, Filtering, Paging, Sorting, etc., the actionBegin event will be triggered. The cellEdit event triggered when edit a cell in batch mode. 
 
actionBegin: https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin 
cellEdit: https://ej2.syncfusion.com/angular/documentation/api/grid/#celledit 
 
Edit: https://ej2.syncfusion.com/angular/documentation/grid/edit/ 
 
By analyzing your code example, you have rendered the input element through columnTemplate feature and trying to affect the changes in the Grid’s dataSource when changing the value of the input element. Before proceeding with this, we would like to share the behavior of CRUD action in EJ2 Grid.  
  
By default, the Grid is rendered in read state. By using columTemplate feature, you can render any custom element in the column. In the read state, the changes on columnTemplate will not affect the Grid’s dataSource. This is the behavior of Grid.  
  
To move the Grid into edit state, you need to select a record and click Edit button in the toolbar or double click the row or click the Add button in the Toolbar. In the edit state, we have rendered the form in Grid, here you can do changes as you want. After clicking Update button, we save the changes in Grid, destroyed the form, and move the grid back into read state.  
  
Please refer to the below sample, to perform CRUD actions in Grid.  
  
Sample:https://stackblitz.com/edit/angular-mrzrt9-hyn1y6?file=app.component.html  
  
So, please explain the below details to provide a better solution to your requirement.  
  

Are you want to save the changes without moving the Grid into edit state? 
Explain your requirement in detail and why you have used columTemplate? 
  
Regards,  
Rajapandiyan S

Rohit Swarup · Answer

Hi Rajapandiyan, Thanks for the help.We have another issue in the grid. We are not able to provide password field. We need to view as well as modify the password field with * symbol. We observed that if we provide <input type="password"> as template, CRUD operations aren't getting triggered.Is there any built in functionality to handle password type.Can you please provide the solution.