Hi Everyone,
I have some issue when adding input text into column table. If I trying input some text and try to change next page my value laways back to blank.
anyone have solution
this my code and view
thanks
AH
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
Hi Santhosh,
Thank you for the solutions. And how about using ejs-dropdownlist? I'm trying to use basic select options and success. But I want to change to an ejs-dropdownlist. How to use the event change of ejs-dropdownlist to get row info like input text.
Thank you
AH
Hi Agung,
Query: How to use the event change of ejs-dropdownlist
We have validated your query and have come up with a solution that uses the change event of the ejs-dropdownlist to bind the changed value of the drop down to the Grid. We have created a code snippet that will help you achieve your requirement. Please find the snippet below:
[app.component.html]
<ejs-grid #grid id="grid" [dataSource]="data" [allowPaging]="true" [pageSettings]="pageSettings" (created)="created($event)" > <e-columns> <e-column field="EmployeeID" headerText="Employee ID" width="125" textAlign="Right" isPrimaryKey='true' ></e-column> <e-column field="Country" headerText="Country" width="200"> <ng-template let-data #template> <ejs-dropdownlist id='Country' name='Country' [dataSource]="countryDistinctData" [popupHeight]="150" [popupWidth]="150" [fields]="fields" value={{data.Country}} (change)='onChange($event)' > </ejs-dropdownlist> </ng-template> </e-column> </e-columns> </ejs-grid> |
[app.component.ts]
export class AppComponent { public data: Object[]; public pageSettings: Object; @ViewChild('grid') grid: GridComponent; public editSettings: EditSettingsModel; public countryDistinctData: Object[]; public fields: Object = { text: "Country", value: "Country" };
ngOnInit(): void { this.countryDistinctData = DataUtil.distinct( this.data, "Country", true ); }
onChange(args) { this.grid.setCellValue(this.grid.getSelectedRecords()[0]['EmployeeID'], 'Country', args.value); } } |
You can also refer to the sample link we have provided for your reference:
If you have any further queries or concerns, please do not hesitate to reach out to us.
Regards,
Santhosh I