hide dashboard pannels


I am trying to make a project where you get to see the graphs you select in a dashboard.
When i hide the graph in the dashboard with the following line code 

document.getElementById('test3').style.visibility = "collapse";

the graph gets hidden but i still see the whitspace where the graph was.
Does annyone know how i can fix this so the graphs that aren't hidden show up directly underneath eachother?



3 Replies 1 reply marked as answer

SS Sharon Sanchez Selvaraj Syncfusion Team February 25, 2021 11:42 AM UTC

Hi Wout, 

Greetings from Syncfusion Support. 

We checked with your reported query. The mentioned issue occurs because the panel will be maintained with the given space in DOM since only CSS is updated.  

So, we have created a sample over here for your reference. Using a button click the event, the required panel can be removed using removePanel  method of Dashboard Layout. 

Please check with the code block given here for your reference. 

    document.getElementById('select').onclick = function (e) { 
        var dashboardObject = document.getElementById('dashboard').ej2_instances[0]; 
        dashboardObject.removePanel("Panel2"); 
    } 

Please check with the sample link below 


Please check with the below links to know more about Dashboard Layout. 




Please get back to us if you need further assistance. 

Regards, 

Sharon Sanchez S 



WN Wout Nobels February 25, 2021 11:58 AM UTC

thanks for the reply 
I already tried this but when i try to add the same pannel back again after i removed it. I need to add a new pannel again
So bassically a user get the option to select some graphs in a pop up and only the selected graphs are showing on the page but when he makes another selection but this time he chooses 
a graph he didn't in the pervious selection i need to show that graph again. So i was wondering if you can set it so it is invinsible and the next time you can make it visible again?



SS Sharon Sanchez Selvaraj Syncfusion Team February 26, 2021 03:58 PM UTC

Hi Wout, 

We have checked with your reported query. 

We would like to mention that, when adding and removing the dashboard Panels through an external event, the panels position get placed only at the specified row and column. 

And when displaying the panels in a horizontal way, the panels position gets maintained at the required row and column value. This is the default behaviour of Dashboard Layout component. 

If you want to update the panels dynamically, please mention the row and column position as to where the panels must be placed  when performing the required operations. You can also update or move the panels using updatePanel and movePanel methods based on your scenario.  

Please check with the functionality of Dashboard with the previous sample.  

Please check with the below links to know more about Dashboard Layout. 




Please get back to us if you need further assistance. 

Regards, 

Sharon Sanchez S 



Marked as answer
Loader.
Up arrow icon