bind click event on the dynamic panels is not working

[RakhiS]

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..

[Sowmiya Padmanaban]

Hi RakhiS,  

  

Greetings from Syncfusion support. 

  

We have validated your reported problem with DashboardLayout component. We suspect that your reported issue occurred due to panels are not rendered properly in the DashboardLayout using ngOnInit. 

  

Please, use the below code in the created event of DashboardLayout component to resolve your reported problem. 

  

   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'); 

    } 

  

Refer the sample link below. 

  

https://stackblitz.com/edit/angular-guz4mw?file=app.component.ts 

  

If the issue still persists, please replicate the issue in attached sample. This will helpful for us to resolve your problem at the earliest. 

  

Please let us know, if you need any further assistance. 

  

Regards,  

Sowmiya.P 

[RakhiS]

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

[Shalini Maragathavel]

Hi Rakhi, 

Thanks for sharing the issue replicable sample but unfortunately we are unable to run your sample at our end. Based on your query we suspect that you need to remove the panel while clicking the close icon. You can achieve your requirement by using removePanel method of Dashboard layout component as demonstrated in the below code example, 

 

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); 

We have prepared a sample based on this requirement, for your reference.  

Sample: https://stackblitz.com/edit/angular-guz4mw-yjs83g?file=app.component.html

API Link : https://ej2.syncfusion.com/angular/documentation/api/dashboard-layout/#removepanel 

Please get back to us, if you need further assistance.

Regards, 

Shalini M. 

[RakhiS]

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

[Shalini Maragathavel]

Hi Rakhi, 

Good day to you. 

We checked your sample and found that ‘this’ reference does not contain Dashboard Layout component instance which is the cause of the issue. So to overcome the reported issue we suggest you to pass ‘this’ reference as arguments in the DeletePanel panel method as demonstrated in the below code snippet, 

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); 

  } 

} 

We have modified your sample based on this for your reference. You can check it below, 

Sample: https://stackblitz.com/edit/angular-guz4mw-tge1ru?file=app.component.ts 

Please get back to us, if you need further assistance.

Regards, 

Shalini M. 

[RakhiS]

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

[Shalini Maragathavel]

Hi RakhiS, 

Sorry for the inconvenience. 

                                                                                                                                         

Based on the shared details, we understand that you are facing an issue while deleting the panel with Chart component in Dashboard Layout. We checked the reported problem with the Dashboard Layout but unfortunately we are unable to reproduce it, as the Dashboard Layout panels are removed properly using close icon in our end.

We have attached a sample similar to the mentioned scenario for your reference. Refer to the below link 

Sample: https://stackblitz.com/edit/angular-guz4mw-8bkto3?file=app.component.html

If the issue persists, kindly share the following details that will be helpful for us to provide a prompt solution. 

1) If possible, please replicate the issue in the above sample.

2) Elaborate on the issue in detail. 

3) Share a video demonstration of the issue. 

These details would help us to find the exact cause of your reported problem and to provide you the prompt solution. 

Regards, 

Shalini M.