1. Home
  2. Forum
  3. Angular - EJ 2
  4. click event on icon in panels

click event on icon in panels

Hi,
I am displaying panels in dashboard from database, In panel header I want to show an icon and on click of that icon I want to call a function, but doing my way I am getting function name as undefined, below I am sharing my code lines


-------------component code-----------------
this._DashboardService.GetDesigningDashboard(this.UserRoleId, this.ProjectId, this.LoggedInEntityType, this.LoggedInEntityId)
      .subscribe(
        data => {
         
          this.panels = JSON.parse(data);
 setTimeout(function () {
      let closeElement = document.querySelectorAll(".classXYZ");
      for (let i = 0; i < closeElement.length; i++) {
        closeElement[i].addEventListener("click", this.onCloseIconHandler.bind(this)); //undefined
      }
    }, 100);
}

-----------html----------------------
 <ejs-dashboardlayout id='default_dashboard' columns="5" #default_dashboard [cellSpacing]='cellSpacing' [allowResizing]='true' [panels]='panel' >
    <e-panels>
      <div *ngFor="let panel of panels">
        <e-panel [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [row]="panel.row" [col]="panel.col" [header]="panel.content">        
        </e-panel>
      </div>
    </e-panels>
  </ejs-dashboardlayout>

-----------console value------------------------------
console value of panel, getting from db
  1. 0:
    1. col: 0
    2. content: "<div class="classXYZ"><a><img src="./assets/flex-images/Delete_1.png" alt="ToolTip" title="Delete Component"/></a></div>"
    3. id: 5
    4. row: 0
    5. sizeX: 1
    6. sizeY: 1
  2. please help

12 Replies 1 reply marked as answer
RA RakhiS replied to RakhiS March 17, 2021 06:47 AM UTC

Hi,
I am displaying panels in dashboard from database, In panel header I want to show an icon and on click of that icon I want to call a function, but doing my way I am getting function name as undefined, below I am sharing my code lines


-------------component code-----------------
this._DashboardService.GetDesigningDashboard(this.UserRoleId, this.ProjectId, this.LoggedInEntityType, this.LoggedInEntityId)
      .subscribe(
        data => {
         
          this.panels = JSON.parse(data);
 setTimeout(function () {
      let closeElement = document.querySelectorAll(".classXYZ");
      for (let i = 0; i < closeElement.length; i++) {
        closeElement[i].addEventListener("click", this.onCloseIconHandler.bind(this)); //undefined
      }
    }, 100);
}

-----------html----------------------
 <ejs-dashboardlayout id='default_dashboard' columns="5" #default_dashboard [cellSpacing]='cellSpacing' [allowResizing]='true' [panels]='panel' >
    <e-panels>
      <div *ngFor="let panel of panels">
        <e-panel [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [row]="panel.row" [col]="panel.col" [header]="panel.content">        
        </e-panel>
      </div>
    </e-panels>
  </ejs-dashboardlayout>

-----------console value------------------------------
console value of panel, getting from db
  1. 0:
    1. col: 0
    2. content: "<div class="classXYZ"><a><img src="./assets/flex-images/Delete_1.png" alt="ToolTip" title="Delete Component"/></a></div>"
    3. id: 5
    4. row: 0
    5. sizeX: 1
    6. sizeY: 1
  2. please help

Please reply

SP Sowmiya Padmanaban Syncfusion Team March 17, 2021 11:09 AM UTC

Hi RakhiS,  
 
Thanks for contacting Syncfusion support. 
 
In your shared code, you have defined the close method inside the setTimeOut function. “this” instances is not maintained inside the setTimeout function. So, you need to store the details in a variable and use that variable inside the setTimeOut function. 
 
Please, refer to the below code snippet. 
 
  created(args) { 
    var proxy = this; 
    let closeElement = document.querySelectorAll(".classXYZ"); 
    for (let i = 0; i < closeElement.length; i++) { 
      closeElement[i].addEventListener( 
        "click", 
        proxy.onCloseIconHandler.bind(this) 
      ); //undefined 
    } 
  } 
 
 
Please, refer to the sample link below. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
RA RakhiS March 23, 2021 12:07 AM UTC

Thanks, how to bind diffrent method on a second icon just beside the first icon. I tried but everytime it is calling only one method

SP Sowmiya Padmanaban Syncfusion Team March 23, 2021 10:57 AM UTC

Hi RakhiS,  
 
To bind different method for each close icon, you need to fetch the particular element and bind the method for that corresponding icon. 
 
Please, refer to the below code snippet. 
 
  created(args) { 
    var proxy = this; 
    let closeElement = document 
      .getElementById("panel3") 
      .querySelector(".classXYZ"); 
    let closeElement1 = document 
      .getElementById("panel4") 
      .querySelector(".classXYZ"); 
    closeElement.addEventListener("click", proxy.onCloseIconHandler.bind(this)); 
    closeElement1.addEventListener("click", proxy.second_function.bind(this)); 
  } 
 
 
Sample link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


RA RakhiS March 30, 2021 03:30 AM UTC

Hi, it is working fine on page load but when I move to other component and come back to this component without page load on created , it is giving null in length as document dashboard is undefined. please help me out

SP Sowmiya Padmanaban Syncfusion Team March 31, 2021 12:08 PM UTC

Hi RakhiS, 
 
Sorry for the inconvenience.  
 
Based on the shared details, we are unable to identify the exact use case of your reported issue. We have created a sample with page navigation similar to your scenario, but the issue is not reproduced in our end and the provided code works fine 
 
Please, refer to the below sample. 
 
 
Please, share the below details to proceed further with your reported problem. 
1.     Share us a video footage on the reported issue. 
2.     Exact use case of your reported problem. 
3.     If possible, replicate the issue in attached sample. 
4.     Share us the steps to replicate your reported problem in the above sample. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


RA RakhiS replied to Sowmiya Padmanaban May 26, 2021 02:28 AM UTC

Hi RakhiS, 
 
Sorry for the inconvenience.  
 
Based on the shared details, we are unable to identify the exact use case of your reported issue. We have created a sample with page navigation similar to your scenario, but the issue is not reproduced in our end and the provided code works fine 
 
Please, refer to the below sample. 
 
 
Please, share the below details to proceed further with your reported problem. 
1.     Share us a video footage on the reported issue. 
2.     Exact use case of your reported problem. 
3.     If possible, replicate the issue in attached sample. 
4.     Share us the steps to replicate your reported problem in the above sample. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


please have a look, I have attached video , waiting for your response. 

Attachment: ezyzip_58b6dedf.zip

RA RakhiS May 26, 2021 11:32 AM UTC

Hi Sawmiya, 
I have already attached video. Have you gone through it. If not please have alook again.

SS Sharon Sanchez Selvaraj Syncfusion Team May 26, 2021 04:01 PM UTC

Hi RakhiS, 
 
We checked with your reported query and the video attachment. Based on the video, we understand that the dialog had opened only for the first click of the icon and this doesn’t works after page navigation. We suspect that the event binding for the icon wouldn’t have taken place properly while adding the panels. So, we suggest you to bind the event listener after adding the panels. In the sample given we have rendered panels initially, similar to the previous sample. And a panel has been added dynamically with same close icon with required event binding.  
 
Please refer to the code snippet below. 
 
 this.dashboardObject.addPanel(panel[0]); 
    let closeElement = document 
      .getElementById(this.count.toString()) 
      .querySelector('.classXYZ'); 
    closeElement.addEventListener('click', this.onCloseIconHandler.bind(this)); 
 
Kindly check with the sample similar to your scenario. 
 
 
If the issue persists in your end, please modify the above sample so as to reproduce your exact issue so that we can assist you promptly.  
 
Regards, 
 
Sharon Sanchez S. 


RA RakhiS replied to Sharon Sanchez Selvaraj May 26, 2021 05:37 PM UTC

Hi RakhiS, 
 
We checked with your reported query and the video attachment. Based on the video, we understand that the dialog had opened only for the first click of the icon and this doesn’t works after page navigation. We suspect that the event binding for the icon wouldn’t have taken place properly while adding the panels. So, we suggest you to bind the event listener after adding the panels. In the sample given we have rendered panels initially, similar to the previous sample. And a panel has been added dynamically with same close icon with required event binding.  
 
Please refer to the code snippet below. 
 
 this.dashboardObject.addPanel(panel[0]); 
    let closeElement = document 
      .getElementById(this.count.toString()) 
      .querySelector('.classXYZ'); 
    closeElement.addEventListener('click', this.onCloseIconHandler.bind(this)); 
 
Kindly check with the sample similar to your scenario. 
 
 
If the issue persists in your end, please modify the above sample so as to reproduce your exact issue so that we can assist you promptly.  
 
Regards, 
 
Sharon Sanchez S. 


Hi Sharon, thanks for your reply. I tried with the same example you gave, but still facing the same issue. Then I found that th eonly diffrence in your and mine sample code is, I am bringing panels info from backend in json format and assign in front end by doing json.parse and in html like the following way :

sql code :


you can see I am creating the header from sql while rendering my panels.
 and while adding doing the same thing that you suggested.:



so while adding clicking is working fine, but only rendering giving problem. I hope u understand. please reply

RA RakhiS replied to RakhiS May 27, 2021 02:55 PM UTC

Hi RakhiS, 
 
We checked with your reported query and the video attachment. Based on the video, we understand that the dialog had opened only for the first click of the icon and this doesn’t works after page navigation. We suspect that the event binding for the icon wouldn’t have taken place properly while adding the panels. So, we suggest you to bind the event listener after adding the panels. In the sample given we have rendered panels initially, similar to the previous sample. And a panel has been added dynamically with same close icon with required event binding.  
 
Please refer to the code snippet below. 
 
 this.dashboardObject.addPanel(panel[0]); 
    let closeElement = document 
      .getElementById(this.count.toString()) 
      .querySelector('.classXYZ'); 
    closeElement.addEventListener('click', this.onCloseIconHandler.bind(this)); 
 
Kindly check with the sample similar to your scenario. 
 
 
If the issue persists in your end, please modify the above sample so as to reproduce your exact issue so that we can assist you promptly.  
 
Regards, 
 
Sharon Sanchez S. 


Hi Sharon, thanks for your reply. I tried with the same example you gave, but still facing the same issue. Then I found that th eonly diffrence in your and mine sample code is, I am bringing panels info from backend in json format and assign in front end by doing json.parse and in html like the following way :

sql code :


you can see I am creating the header from sql while rendering my panels.
 and while adding doing the same thing that you suggested.:



so while adding clicking is working fine, but only rendering giving problem. I hope u understand. please reply

Please reply for the same

SS Sharon Sanchez Selvaraj Syncfusion Team May 27, 2021 04:12 PM UTC

Hi RakhiS, 
  
We checked with your reported scenario. We understand that when clicking on the icon, the event handler does not open the required dialog when navigating through the pages. So can you please provide the exact code where you perform the navigation of the component internally, i.e. clicking on the home icon to the settings icon and vice versa. Else, it would be helpful if you could provide the complete code snippets of your application. If possible, kindly modify the sample provided from our end to replicate the exact issue to assist you promptly. 
  
  
Regards, 
 
Sharon Sanchez S. 
 


Loader.
Up arrow icon