Initial size and message for empty dashboard

[Juan Jiminez]

I'm looking for a way to limit the intitial size of the dashboard layout and maybe display a message when there are no panels. 

Right now, when the dashboard is empty it takes pretty much the whole screen and hides the content underneath.

I've tried using the "Created" event to change the height manually when the "rows" property is empty but it is inmediately overwriten. 

I've also tried to use the ":empty" css pseudo class but it doesn't work because the dashboard renders a white space. 

Thanks in advance.

-Juan

[Keerthana Rajendran]

Hi Juan, 

 

Greetings from Syncfusion support. 

 

We have checked your reported query to set the initial height of dashboard layout when there is no panel. We would like to let you know that when the panels count is zero, the dashboard layout will consider the rows values equal to columns values and render the layout which will be an empty layout. However, we can achieve your requirement to hide the dashboard element, by adding display CSS property value as none to the dashboard element in the created () event when the panel count is zero. Here you can add the display message based on your requirement.  

 

Refer the below code snippet.   

  

function Created () { 

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

        if (dashboard.panels.length == 0) { 

            dashboard.element.classList.add("e-hide"); 

        } 

    } 

<style> 

    .e-hide { 

        display: none !important; 

    } 

</style> 

 

For your reference, we have prepared a sample with the above-mentioned solution and attached it below.  Here, we have added a class to the dashboard layout element while panels count is zero and set display CSS property value none for the added class. Here , during button click we remove the class while a panel is added. 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1290120190.zip 

 

Please let us know, if you have any concerns. 

 

Regards, 

Keerthana. 

[Juan Jiminez]

Thanks Keerthana,

It works as expected, I just need to make sure you remove the class when I add panels.

[Keerthana Rajendran]

Hi Juan, 

 

Most Welcome. Yes, you need to remove the hide class during addition of panel as mentioned in our previous update. Please let us know if you need further assistance on this. 

 

Regards, 

Keerthana.