We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi,
on init event, I am getting the panels which are rendering in my dashboard. I have to bind click event on the icons which are present in header. So I have written the following code inside "Created" event, which call once the dashboard is prepared. But on this it is giving undefined issue.
ngOnInit() {
this._DashboardService.GetDesigningDashboard(this.UserRoleId, this.ProjectId, this.LoggedInEntityType, this.LoggedInEntityId, "design")
.subscribe(
data => {
this.panels = JSON.parse(data);
this.count = this.panels.length;
}
);
}
created(args) {
setTimeout(function () {
for (let i = 0; i < this.count; i++) {
let closeElement = document.getElementById(this.panels[i].id.toString()).querySelector(".classDel");
closeElement.addEventListener('click', this.onCloseIconHandler.bind(this));
}
for (let k = 0; k < this.count; k++) {
let addElement = document.getElementById(this.panels[k].id.toString()).querySelector(".classAdd");
addElement.addEventListener('click', this.onAddIconHandler.bind(this));
}
}, 100);
}
(1)It is not working , icons are not clickable. even I tried to call the init method inside constructor but same issue arises. (2) Also args parameter in created event is always undefined.
please do the needful..
|
created(args) {
this.dashboardservice.getValue().subscribe(data => {
// added the panels to the DashboardLayout component.
(this.dashboardObject as any).panels = data;
this.count = (this.dashboardObject as any).panels.length;
});
var proxy = this;
setTimeout(function() {
for (let i = 0; i < proxy.count; i++) {
// fetch the close icon
let closeElement = document
.getElementById(proxy.dashboardObject.panels[i].id.toString())
.querySelector('.classDel');
// bind the click event of close icon.
closeElement.addEventListener(
'click',
proxy.onCloseIconHandler.bind(this)
);
}
}, 100);
}
onCloseIconHandler(args) {
console.log('event triggered');
} |
Hi,
I have replicated the issue, after applying the solution provided by you, I am getting dashboardobj as undefined. As on icon close click I want to remove the corresponding panel but it is not reading the dashboard obj. I have shared the sample link below, in console you can also see. please do the needful.
https://angular-guz4mw-5fhm4v.stackblitz.io
|
export class AppComponent {
created() { var proxy = this; setTimeout(function() {
for (let i = 0; i < proxy.count; i++) {
let closeElement = document.getElementById(proxy.dashboardObject.panels[i].id.toString())
.querySelector('.classDel');
// bind the click event of close icon.
closeElement.addEventListener('click', function() { if ((<HTMLElement>event.target).offsetParent) {
proxy.dashboardObject.removePanel(
(<HTMLElement>event.target).offsetParent.id
); } }); } }, 100); |
Hi,
I have tried with the same solution , but I want to delete the panel using the other method present in the component or want to bind click for add icon on the panel and calling other method, but now by using any keyword it is showing undefined for the methods. please go through the link I have shared and you can see in console
https://stackblitz.com/edit/angular-guz4mw-tgrwh6?file=app.component.ts
|
export class AppComponent {
created() {
this.dashboardservice.getValue().subscribe(data => {
var proxy = this;
setTimeout(function() {
for (let i = 0; i < proxy.count; i++) {
closeElement.addEventListener('click', proxy.onCloseIconHandler.bind(proxy)
);
}
});
}
onCloseIconHandler(event: any): void {
if ((<HTMLElement>event.target).offsetParent) {
let id = (<HTMLElement>event.target).offsetParent.id;
this.DeletePanel(id, this);
}
}
DeletePanel(panelId, inst) {
alert(panelId);
inst.dashboardObject.removePanel(panelId);
}
} |
Hi,
Thanks for your reply. I have applied your code and it is working fine with respect to blank panels. But when I am adding any component say any chart then my chart gets rendered into the panel with the same icons . But after adding component the page is getting refreshed and then again it is giving me undefined error and icons are not clickable.
hope you are getting my issue
