Hi Agung,
Query: How to
add input text into column table
We have checked your query and that you want to make some
columns always editable. We achieved your query using Column Template as per
your request. We have used the created event to bind the data entered into the
input to the Grid. We have attached a code snippet that will help you achieve
your requirement.
|
[app.component.html]
<div class="control-section">
<ejs-grid #grid id="grid"
[dataSource]='data' [allowPaging]="true"
[pageSettings]="pageSettings" (created)="created($event)">
<e-columns>
<e-column
field='FirstName' headerText='First Name' width='150' textAlign='Center'>
<ng-template #template let-data>
<input id='' [value]='data.FirstName' class='custemp e-input' type='text'
style='width: 100%'>
</ng-template>
</e-column>
. . . . .
|
|
[app.component.ts]
export class AppComponent {
. . . . .
created() {
this.grid.element.addEventListener('keyup', function (e) {
if
((e.target as any).classList.contains('custemp')) {
var
row = parentsUntil(e.target as any, 'e-row');
var rowIndex = (row as any).rowIndex;
var
uid = row.getAttribute('data-uid');
var grid = (document.getElementsByClassName('e-grid')[0] as
any).ej2_instances[0];
var rowData = grid.getRowObjectFromUID(uid).data;
(rowData
as any).FirstName = (e.target as any).value;
grid.updateRow(rowIndex,
rowData);
}
});
}
}
|
Please find the sample and the documentation for make a Grid
column always editable in the links below:
Sample: https://stackblitz.com/edit/angular-bpx4ne?file=src%2Fapp.component.html,src%2Fapp.component.ts
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/editing/edit#how-to-make-a-grid-column-always-editable
If you have any further queries or concerns, please do not
hesitate to let us know.
Regards,
Santhosh Iruthayaraj
