Open PDF document within LightBox control?

[Jason]

Hello,

Is it possible to open/display a PDF document within the LightBox control?  If so, can you please provide a simple example.

Thanks!

[Shinu]

Hi Jason,

Please have a look into the sample code snippet to achieve your scenario.

ASPX:

<asp:Image ID="Image1" AlternateText="Mountain Pine Cones Thumbnail" runat="server"
    ImageUrl="~/Images/Icon-small.jpg" />
<telerik:RadLightBox ID="RadLightBox1" runat="server" Width="780px" Height="600px"
     Modal="true">
    <Items>
        <telerik:RadLightBoxItem TargetControlID="Image1">
            <ItemTemplate>
                <iframe id="iframe3" runat="server" width="600px" height="600px" src="Getting Started.pdf">
                </iframe>
            </ItemTemplate>
        </telerik:RadLightBoxItem>
    </Items>
</telerik:RadLightBox>

Hope this will helps you.
Thanks,
Shinu.

[Jason]

Thank you Shinu, that did the trick!

[Jon]

Thanks, also what I was looking for, but I have a follow-up question, is it therefore possible to set the pdf's src in the code behind ?

[Daniel]

Hello Jon,

There is an easier way to display the PDF file in RadLightBox. The control supports iframes directly so you can just the set NavigateUrl property to point to the desired PDF file. Both client and server approach is possible. In my opinion this would be a better way compared to using templates.

<telerik:RadLightBox ID="RadLightBox1" runat="server">
    <Items>
        <telerik:RadLightBoxItem NavigateUrl="~/test.pdf">
        </telerik:RadLightBoxItem>
    </Items>
</telerik:RadLightBox>

Server-Side Basics
Client-Side Basics
Adding RadLightBox items on Client

Regards,
Daniel
Telerik

 

 

[Marc]

Hi Jason, Could you post a link to your PDF being displayed in a light box instead of a tab?

I am particularly interested to see how this works in a mobile browser.

When a PDF is opened in a desktop using a lightbox, you still get all the usual controls to print, save etc.

In a Mobile browser, the browser controls the share etc. but it doesnt recognize the presence of the lightbox with share for example as it would normally do if opened in a new tab. This is for iOs devices. For Android, it will save the PDF to the phone regardless if opened set to open in a new tab or lightbox.

[Marc]

Hi Daniel,

Sorry, I should have posted this question to you ...

I am particularly interested to see how this works in a mobile browser.

When a PDF is opened in a desktop using a lightbox, you still get all the usual controls to print, save etc.

In a Mobile browser, the browser controls the share etc. but it doesnt recognize the presence of the lightbox with share for example as it would normally do if opened in a new tab. This is for iOs devices. For Android, it will save the PDF to the phone regardless if opened set to open in a new tab or lightbox.

[Daniel]

Hello Marc,

I believe this is an expected behavior. For best consistency across browsers I would recommend that you try pdf.js as demonstrated in the following blog post. You can easily modify the example to use RadLightBox if you prefer it over RadWindow.
Building an ASP.NET PDF Viewer with Telerik Window Control and PDF.js

Browsers do not necessarily have a built-in PDF reader. Even if they do, they may be designed to open the PDF file in fullscreen for better mobile experience for example.
RadLightBox does not have a built-in PDF reader so this behavior is out of our control.

Let me know if you need more information.

Regards,
Daniel
Telerik