Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
146968 | Aug 27,2019 08:53 AM UTC | Aug 30,2019 06:16 AM UTC | Angular - EJ 2 | 3 |
![]() |
Tags: Grid |
[app.component.html]
<ejs-grid #Grid id='Grid' (click)='click($event)' [dataSource]='parentData' [childGrid]='childGrid'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right'></e-column>
<e-column field='FirstName' headerText='Name' width='140'></e-column>
<e-column field='Title' headerText='Title' width='170'></e-column>
<e-column field='HireDate' headerText='Hired Date' width='120' format='yMd' textAlign='Right'></e-column>
<e-column field='ReportsTo' headerText='Reports To' width='120' textAlign='Right'></e-column>
</e-columns>
</ejs-grid>
[app.component.ts]
export class AppComponent {
. . . . .
click(e) {
// add class for the template button
if (e.target.classList.contains('btn')) {
let gridEle = parentsUntil(e.target,'e-grid'); // get current child parent element
let gobj = gridEle['ej2_instances'][0]; // create current child grid instance
// get row information
console.log(gobj.getRowInfo(e.target));
}
}
ngOnInit(): void {
this.parentData = employeeData;
this.childGrid = {
. . . . .
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 120 },
{ field: 'Freight', headerText: 'Freight', width: 120 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 },
{ headerText: 'Action', width: 120, template: '<div><button class="btn">Details</button></div>' }
],
};
}
}
|
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.
This page will automatically be redirected to the sign-in page in 10 seconds.