Click Panel

[Maikel Cordeiro]

Hello,

I didn't find much information about Dashboard Layout. I'd like to know how to performa a Panel Click event. For example, I'd like to set a textbox value, the header of a panel when I click it.

In another textbox, I'd like to set the Id.

Thank you so much. 

Maikel Cordeiro

[Sowmiya Padmanaban]

Hi Maikel,  

 

We have checked your reported query. We suspect that your requirement is that you are expecting to add textbox value to the header of the a Dashboard panel, when you click on it. 

 

To achieve your requirement , you need to bind click event for all the DashboardLayout panels in the created event. And then change the header value of the particular panel in updatePanel method of DashboardLayout component. 

 

Refer the below code snippet. 

<ejs-textbox id="textbox" placeholder="Enter the value"></ejs-textbox> 

 

<ejs-dashboardlayout id="dynamicLayout" allowResizing="true" columns="6" created="oncreate"> 

    <e-dashboardlayout-panels> 

        <e-dashboardlayout-panel row="0" col="0" sizeX="2" sizeY="2" content="<div></div>" header="<div>Panel 1</div>"> 

        </e-dashboardlayout-panel> 

        <e-dashboardlayout-panel row="0" col="2" sizeX="2" sizeY="2" content="<div></div>" header="<div>Panel 2</div>"> 

        </e-dashboardlayout-panel> 

        <e-dashboardlayout-panel row="0" col="4" sizeX="2" sizeY="2" content="<div></div>" header="<div>Panel 3</div>"> 

        </e-dashboardlayout-panel> 

        <e-dashboardlayout-panel row="2" col="0" sizeX="4" sizeY="2" content="<div></div>" header="<div>Panel 4</div>"> 

        </e-dashboardlayout-panel> 

        <e-dashboardlayout-panel row="2" col="4" sizeX="2" sizeY="2" content="<div></div>" header="<div>Panel 5</div>"> 

        </e-dashboardlayout-panel> 

    </e-dashboardlayout-panels> 

</ejs-dashboardlayout> 

<script> 

    function oncreate() { 

        var dashboard = document.getElementById("dynamicLayout").ej2_instances[0]; 

        for (i = 0; i < dashboard.panelCollection.length; i++) { 

            // Bind the click event for all the panels 

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

        } 

    } 

    function onCloseIconHandler(args) { 

        var dashboard = document.getElementById("dynamicLayout").ej2_instances[0]; 

        // fetch the textbox value 

        var textbox_value = document.getElementById("textbox").ej2_instances[0].value; 

        // Update the textbox value to the panel element using updatePanel method. 

        dashboard.updatePanel({id:args.currentTarget.id, header: '<div> '+ textbox_value + '</div>'} ) 

    } 

</script> 

 

Refer the below sample link below. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/DashboardLayout1768987229.zip 

 

Note: In DashboardLayout, all process like floating and pushing of panels while dragging and resizing the panels are handled based on id of the panels. so we can't dynamically change the id values of the panels. 

 

Refer the below link to know more about the DashboardLayout. 

 

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

 

Demo link –https://ej2.syncfusion.com/aspnetcore/DashboardLayout/DefaultFunctionalities#/material 

 

API Reference –https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels 

 

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

 

Regards,  

Sowmiya.P 

[Maikel Cordeiro]

Hi, thank you for your fast answer but it's not exactly my solution.

I attached an image to make my explanation easier.

Making long story short, I'm writing a dashboard configuration and in this screen user can Add Panel (Step 1 and 2) and configure it.

In the step 1, I'm using addEventListener (Step 3) but it raises an error (Step 4). For a simple test, if the addEventListener works I'm sending an alert('teste'). But the idea is setting the textbox (Step 6) with the value of the panel header (Panel1 text in this case).

Thank you again.

Attachment: DashboardPanelClick_1fb62842.zip

[Sowmiya Padmanaban]

Hi Maikel,  

 

We have checked your attached screenshot. We found out that you are trying to add the panel using addPanel() method and also bind the click event for newly added panel. In your application, you binded the click event for dashboard layout panel properties not for dashboard layout panel element. So, the reported problem occurs. 

 

You can bind the click event for Dashboard layout panel element using addEventListener. In this case, it triggers the click event when click the dashboard layout panel. 

 

Refer the below code snippet to bind the click event for dashboard layout panel element. 

 

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

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

        var count = 0; 

        document.getElementById('add').onclick = function (e) { 

            var panel = [{ 

                'id': count.toString() + '_layout', 'sizeX': 2, 'sizeY': 2, 'row': 0, 'col': 0, 

                header:'<div> Panel'+ count.toString() +'</div>', 

                content: '<div class="text-align"> Content' + count.toString() + '</div>' 

            }]; 

            dashboardObject.addPanel(panel[0]); 

            // Bind the click event for panel element. 

            var panel_element = document.getElementById(panel[0].id); 

            panel_element.addEventListener('click', ClickEvent); 

            count = count + 1; 

        };      

    }); 

 

When click the dashboard layout panel, ClickEvent will triggered. In that event’s method, you can perform the operations based on your requirement. In the below code snippet, we fetch the dashboard layout header value and assign that value to the textbox element. 

 

Refer the below code snippet. 

  function ClickEvent(args) { 

        var dashboard = args.currentTarget.querySelector(".e-panel-header").innerText; 

        //Set the value to the textbox 

        document.getElementById("textbox").ej2_instances[0].value = dashboard; 

    } 

 

 

Refer the below sample link. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/DashboardLayout1815051487.zip 

 

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

 

Regards,  

Sowmiya.P 

[Maikel Cordeiro]

Awesome! That's exactly what I need!

Thank you so much!

PS: I'm using addPanel method indeed.

[Sowmiya Padmanaban]

Hi Maikel,  

  

Most Welcome. We are happy to hear that your issue has been resolved. Please contact us if you need any help from us. We will happy to assist you. 

  

Regards,  

Sowmiya.P