Dynamic Panels DashboardLayout - Can not add the click event

[Henry Pham]

hi, 

I am calling the api to load the dashboard and I try to add the onclick event to a remove panel but it doesn't work. 

var dashboard = new ej.layouts.DashboardLayout({

        cellSpacing: [20, 20],

        columns: 6,

        allowFloating: false,

        dragStop: onDragStop,

        panels: []

    });

dashboard.appendTo('#dashboard_default');

createDashboard();

function createDashboard() {

          //build a panels  list

        var myPage = myCustomCredentialsStore.get();

        $.get('api/dashboard/get', { customerId: myPage.customerId, user: myPage.credentials.userName, isDisplay: true }, function (dashboards) {

            dashboardList = dashboards;

            var panels = [];

            for (var i = 0; i < dashboards.length; i++) {

                  ......................................

                  .....................................

                }

                

            }

            dashboard.panels = panels;

        });

    }

document.addEventListener('DOMContentLoaded', function () {

        var dashboardObject = document.getElementById('dashboard_default').ej2_instances[0];

        var count = 8;

        function onCloseIconHandler(event) {

            if (event.target.offsetParent) {

                dashboardObject.removePanel(event.target.offsetParent.id);

            }

        }

         var closeElement = document.querySelectorAll('.dashboardItem-close');

         console.log("closeElement", closeElement);

        for (var i = 0; i < closeElement.length; i++) {

            closeElement[i].addEventListener('click', onCloseIconHandler);

        }

    });

Does anyway that we can await for api to complete load into dashboard and make 

var closeElement = document.querySelectorAll('.dashboardItem-close');

[Sowmiya Padmanaban]

Hi Henry Pham,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem with DashboardLayout component. In your shared code , you have dynamically added the panels to the DashboardLayout component, dashboard takes some minimal time to load the panels into the DOM. So, you need to bind the click event for the close icon within certain time delay. 

 

Please, refer the below code snippet. 

 

 setTimeout(function() { 

    let closeElement = document.querySelectorAll(".e-clear-icon"); 

    for (let i = 0; i < closeElement.length; i++) { 

      closeElement[i].addEventListener("click", onCloseIconHandler); 

    } 

  }, 100); 

 

 

Please, refer the below sample link: 

 

https://stackblitz.com/edit/9e5vr3-mju1wp?file=index.js 

 

Please, refer to the below links for DashboardLayout component. 

 

UG Documentation- https://ej2.syncfusion.com/javascript/documentation/dashboard-layout/es5-getting-started/ 

 

Demo link- https://ej2.syncfusion.com/javascript/demos/#/material/dashboard-layout/properties.html 

 

API reference- https://ej2.syncfusion.com/javascript/documentation/api/dashboard-layout/ 

 

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

 

Regards,  

Sowmiya.P