Open PDF document within LightBox control?

8 posts, 1 answers
  1. Jason
    Jason avatar
    5 posts
    Member since:
    May 2013

    Posted 23 Feb 2014 Link to this post

    Hello,

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

    Thanks!
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Feb 2014 in reply to Jason Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jason
    Jason avatar
    5 posts
    Member since:
    May 2013

    Posted 27 Feb 2014 in reply to Shinu Link to this post

    Thank you Shinu, that did the trick!
  5. Jon
    Jon avatar
    1 posts
    Member since:
    Feb 2012

    Posted 02 Feb 2015 in reply to Shinu Link to this post

    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 ?
  6. Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 05 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Marc
    Marc avatar
    2 posts
    Member since:
    Feb 2015

    Posted 15 Feb 2015 in reply to Jason Link to this post

    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.




  8. Marc
    Marc avatar
    2 posts
    Member since:
    Feb 2015

    Posted 15 Feb 2015 in reply to Daniel Link to this post

    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.




  9. Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 18 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017