@Component({
selector: 'app-root',
template: `
<h2>{{title}}</h2>
<ejs-accordion id={{accordion}}
(expanded)='expanded($event)' (expanding)='expanding($event)'>
<e-accordionitems>
<e-accordionitem *ngFor="let
item1 of firstItems" header={{item1.header}}
content={{item1.content}}></e-accordionitem>
</e-accordionitems>
</ejs-accordion>
`
})
export
class AppComponent {
title = 'Accordion';
expanded(args) {
var doc = new
DOMParser().parseFromString(args.item.content, 'text/html');
var id =
doc.querySelector('div').getAttribute('id');
let grid: Grid = new Grid({
dataSource: [{OrderID: 10248,
CustomerID: 'Vinet'}],
columns: [
{ field: 'OrderID',
headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'CustomerID',
width: 140, headerText: 'Customer ID', type: 'string' }
]
});
(grid as any).appendTo('#'+id);
}
expanding(args) {
}
firstItems = [
new Items('ASP.NET', '<div
id="Gridone"></div>'),
new Items('ASP.NET MVC', '<div
id="Gridtwo"></div>'),
new Items('JavaScript', '<div
id="Gridthree"></div>')
];
}
|