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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Dashboard Platform
  4. Dashboard Viewer in ASP NET MVC must have parrent element <body>

Dashboard Viewer in ASP NET MVC must have parrent element <body>

Hi,

I want to ask why it is needed to paste dashboard element directly inside <body> tag like this?

<body>
    <div id="dashboard" style="width:100%; height:100%;"></div>
    <script type="text/javascript">
     $(document).ready(function()
      {
        $('#dashboard').ejDashboardViewer({ url: "@ViewBag.ServieURL", report: "@ViewBag.ReportPath", filterParameters: location.search.substr(1) });
      });
    </script>
</body>
The problem is, that I want to have it in another container to wrap it to my template.

eg:

<body>
    <div id="bodyId">
        <div id="dashboard" style="width:100%; height:100%;"></div>
    </div>
    <script type="text/javascript">
     $(document).ready(function()
      {
        $('#dashboard').ejDashboardViewer({ url: "@ViewBag.ServieURL", report: "@ViewBag.ReportPath", filterParameters: location.search.substr(1) });
      });
    </script>
</body>

Hovever this solution does not show dashboard correctly, not rendering the graphs, only its titles and buttons (but it is not possible to click at them, or does not have click events).

Is there any solution to wrap Dashboard viever in ASP NET MVC ? Is there any workoround? I think that there will be more people deserving this functionality.

Thanks,
Martin Rasovsky.


3 Replies
NS Narendran S Syncfusion Team June 22, 2016 11:27 AM UTC

Hi Martin,   
Thanks for your interest in Syncfusion product.    
The issue occurs in your sample due to “bodyId” div height is not set. Could you please add the below highlighted style in your sample and check it?  
  
   <body>  
    <div id="bodyId" style="width:100%; height:100%;">  
        <div id="dashboard" style="width:100%; height:100%;"></div>  
    </div>  
    <script type="text/javascript">  
     $(document).ready(function()  
      {  
        $('#dashboard').ejDashboardViewer({ url: "@ViewBag.ServieURL", report: "@ViewBag.ReportPath", filterParameters: location.search.substr(1) });  
      });  
    </script>  
  
 
Regards,   
Narendran S.  


VP Vishal Patel August 7, 2017 02:19 PM UTC

Hi Narendran,


I have a similar issue of height while embedding a dashboard in my application. I have tried suggested style as show below, but it still not work. Can you please let me know how to fix it. Please check attachement for rendering view.





GA Gangatharan Anandavel Syncfusion Team August 8, 2017 09:32 AM UTC

Hi Martin, 

Thank you for contacting Syncfusion support. 

In your screenshot, you have set the height and width of ‘bodyId’ div as ‘100%’. So the size of parent container will be taken to ‘bodyId’ div. Here ‘section’ is the parent container. So please set the height and width of ‘section’ as ‘100%’ then the issue will be resolved. 
 

Regards, 
Gangatharan 


Loader.
Up arrow icon