We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Initial size and message for empty dashboard

Thread ID:

Created:

Updated:

Platform:

Replies:

148923 Nov 7,2019 11:53 PM UTC Nov 11,2019 09:25 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: DashboardLayout
Juan Jiminez
Asked On November 7, 2019 11:53 PM UTC

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 [Syncfusion]
Replied On November 8, 2019 08:50 AM UTC

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. 
 
 
Please let us know, if you have any concerns. 
 
Regards, 
Keerthana. 


Juan Jiminez
Replied On November 8, 2019 05:11 PM UTC

Thanks Keerthana,

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

Keerthana Rajendran [Syncfusion]
Replied On November 11, 2019 09:25 AM UTC

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.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon