Telerik MVC3 Window showing Image or Pdf

501 views Asked by At

I am using Telerik Window in my MVC3 project. I have bulk of files (like .Png, .JPEG, .Pdf etc.) in my local system. I wanted to show these files with Telerik Window. I have no idea that how can i do this. I need suggestions to do this. Please help me for this.

I have a Telerik Window code like this.

View.cshtml

<div id="upload_win">
@{Html.Telerik().Window().Visible(false)
        .Name("File").ClientEvents(cli => cli.OnClose("OnClose"))
        .Modal(true)
         // .LoadContentFrom("action","Controller")
        .Scrollable(false)
        .Resizable()
        .Draggable(true)
        .Width(870)
        .Height(500)
        .Render();
}
</div>
1

There are 1 answers

0
Jason Robinson On

I had this same issue today and this is what I had to do to get it working.

@(Html.Telerik().Window()
            .Name("Window")
            .Title("Server Report Window (PDF)")
            .Draggable(true)
            .Resizable(resize => resize
                .Enabled(false)
            )
            .Modal(true)
            .Buttons(button => button
                .Maximize()
                .Close()
            )
            .Effects(fx =>
                fx.Zoom().Opacity()
                    .OpenDuration(AnimationDuration.Slow)
                    .CloseDuration(AnimationDuration.Slow)
            )
            .Content("<iframe src='Controller/Action' width='100%' height='100%' />")
            .Width(500)
            .Height(350)    
        )

So, points to note, I tried using LoadContentFrom, although it would return the PDF, the PDF was being displayed as "byte code". Using Content, I used an iframe, and let the iframe render the PDF.

I'm still trying to figure out how to get it in LoadContentFrom, but for now this get's the job done.

UPDATE: Figured it out, here's the process

  1. Create Action that will return partial view

    public ActionResult DisplayPDF(){ return PartialView("_PDFView"); }

  2. Create Partial View that only contains an iframe, be sure to set the width and height to 100%, which will ensure that no matter the size of the Telerik Window, it will expand to fit accordingly, even on resizing. The iframe src should point to the action that returns the File(pdf_content, "application/pdf)

    iframe src="Controller/Action" width="100%" height="100%"

  3. In your View that contains the Telerik Window, update it to reflect the path to the PartialView

    .LoadContentFrom("Controller/DisplayPDF")