|
<div id='customdiv'>row is selected</div>
<ejs-grid #grid [dataSource]='data' (rowSelected)="rowSelected($event)" (rowDeselected)="rowDeselected($event)">
<e-columns>
<e-column field='OrderID' width='120'></e-column>
<e-column field='CustomerID' width='120'></e-column>
<e-column field='ShipCity' width='120'></e-column>
</e-columns>
</ejs-grid>
<style>
#customdiv{
display:none; // initially div element is hided
}
</style>
export class AppComponent implements OnInit {
@ViewChild('grid',{static:true}) public grid: GridComponent;
public data: object[];
ngOnInit(): void {
this.data = hierarchyOrderdata;
}
rowSelected(args){
// show the div element when grid selection occurs
document.getElementById('customdiv').style.display = 'block';
}
rowDeselected(args){
if(this.grid.getSelectedRecords().length == 0){
// hide the div element when no selection occurs in grid
document.getElementById('customdiv').style.display = 'none';
}
}
}
|
