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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

124663 Jun 21,2016 08:49 AM Aug 8,2017 05:32 AM Dashboard Platform 3
loading
Tags: Dashboard Viewer
Martin R
Asked On June 21, 2016 08:49 AM

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.


Narendran S [Syncfusion]
Replied On June 22, 2016 07:27 AM

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.  


Vishal Patel
Replied On August 7, 2017 10:19 AM

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.





Gangatharan Anandavel [Syncfusion]
Replied On August 8, 2017 05:32 AM

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 


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.

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.

;