Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
148850 | Nov 6,2019 11:42 AM UTC | Nov 17,2020 01:48 PM UTC | Angular - EJ 2 | 3 |
![]() |
Tags: Grid |
App.component.html
<div class="control-section">
<button ejs-button [isPrimary]="true" (click)="btnClick()">Refresh</button>
<ejs-grid #grid [dataSource]='data' (dataBound)="dataBound($event)" (created)='expand($event)' id='Grid'>
<ng-template #detailTemplate let-data>
. . .
</ng-template>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column>
<e-column field='FirstName' headerText='Name' width='120'></e-column>
<e-column field='Title' headerText='Title' width='170'></e-column>
<e-column field='HireDate' headerText='Hire Date' width='135' textAlign='Right' format='yMd'></e-column>
<e-column field='ReportsTo' headerText='Reports To' width='120' textAlign='Right'></e-column>
</e-columns>
</ejs-grid>
</div>
|
App.component.ts
@Component({
. ..
})
export class AppComponent {
public data: any;
@ViewChild("grid")
public gridObj: GridComponent;
public row: any;
constructor() {}
. . .
btnClick() {
//here we are storing the expanded row before refresh
this.row = parentsUntil(
this.gridObj.element.querySelector(".e-detailrowexpand"),
"e-row"
);
this.gridObj.refresh();
}
dataBound (e) {
//here we expanding the row again after refresh
if (this.row) {
let rowIndex = parseInt(this.row.getAttribute("aria-rowindex"));
this.gridObj.detailRowModule.expand(rowIndex);
}
}
. . .
} |
App.component.html
<div class="control-section">
<button ejs-button [isPrimary]="true" (click)="btnClick()">Refresh</button>
<ejs-grid #grid [dataSource]='data' (dataBound)="dataBound($event)" (created)='expand($event)' id='Grid'>
<ng-template #detailTemplate let-data>
. . .
</ng-template>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column>
<e-column field='FirstName' headerText='Name' width='120'></e-column>
<e-column field='Title' headerText='Title' width='170'></e-column>
<e-column field='HireDate' headerText='Hire Date' width='135' textAlign='Right' format='yMd'></e-column>
<e-column field='ReportsTo' headerText='Reports To' width='120' textAlign='Right'></e-column>
</e-columns>
</ejs-grid>
</div>
|
App.component.ts
@Component({
. ..
})
export class AppComponent {
public data: any;
@ViewChild("grid")
public gridObj: GridComponent;
public row: any;
constructor() {}
. . .
. . .
expand() {
this.gridObj.element.addEventListener("click", e => {
if (parentsUntil(e.target as Element, "e-detailrowexpand")) {
//collapsing all the expanding records using collapseAll method
this.gridObj.detailRowModule.collapseAll();
let row = parentsUntil(e.target as Element, "e-row");
let rowIndex = parseInt(row.getAttribute("aria-rowindex"));
// expanding the particular using expand method
this.gridObj.detailRowModule.expand(rowIndex);
}
});
}
}
. . .
} |
recordClick(args) {
if ( args.target && args.target.closest("td").classList.contains("e-detailrowcollapse")) {
this.grid.detailCollapseAll(); // collapse all the detailrow
}
} |
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.