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
Starting in 2019, the Reporting control is no longer included in Essential Studio. If you're experiencing issues with the Syncfusion Reporting Platform, Report Viewer, Report Designer, or Report Writer, we recommend migrating to Bold Reports, our dedicated reporting platform.

Bold Reports offers a comprehensive suite of tools and features for all your reporting needs, and we will help you make a smooth transition from the discontinued control. Our support team at https://support.boldreports.com/ is here to assist you with any questions or difficulties you may encounter during the migration process.

We thank you for choosing Syncfusion and appreciate your understanding.

REportviewer in Modal

Hi is it posible to show the reportviewer in a modal or dialog?

thanks in advance

3 Replies

YD Yuvaraj Devarajan Syncfusion Team January 6, 2017 08:59 AM UTC

Hi Jaime, 

Thanks for contacting Syncfusion support.    
    
We can render the ReportViewer control in Dialog box/ modal as shown in the below code example and rendered output screenshot is shown below,    

<script> 
    function openDialog() { 
        $("#dialog").ejDialog("open"); 
    } 
</script> 
 
<body> 
    @{ 
        Html.EJ() 
            .Button("button") 
            .Text("Open Report") 
            .Type(ButtonType.Button) 
            .ClientSideEvents(evt => evt.Click("openDialog")) 
            .Render(); 
    } 
 
    @{ 
        Html.EJ() 
            .Dialog("dialog") 
            .Title("Dialog") 
            .ShowOnInit(false) 
            .MinWidth("800px") 
            .Height("700px") 
            .MinHeight("750px") 
            .ContentTemplate(@<div style="width:100%; height:100%; position:absolute;"> 
                @(Html.EJ().ReportViewer("reportsample") 
                .ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Local) 
                .ReportServiceUrl(VirtualPathUtility.ToAbsolute("~/api/ReportApi")) 
                .ReportPath("~/App_Data/GroupingAggregate.rdlc") 
                 ) 
             </div>) 
            .Render(); 
     } 
           
</body> 
 
<style type="text/css"> 
    html, body { 
        overflow: hidden; 
        padding: 0; 
        margin: 0; 
        height: 100%; 
        position: static; 
    } 
 
    #reportsample { 
        width: 750px; 
        height: 700px; 
        position: absolute; 
    } 
</style>* 

 

We have prepared a sample and it can be downloaded from, 

Please refer to the UG documentation link to create ReportViewer and Dialog box sample in ASP.NET MVC,    

Regards, 
Yuvaraj D. 



JA jaime January 6, 2017 03:59 PM UTC

Thanks for the example, it's perfect


YD Yuvaraj Devarajan Syncfusion Team January 9, 2017 04:37 AM UTC

Hi Jaime, 

Thanks for the update. We are happy to hear that your issue is resolved. 

Regards, 
Yuvaraj D 


Loader.
Live Chat Icon For mobile
Up arrow icon