RadTabStrips and FancyBox

3 posts, 1 answers
  1. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 04 Mar 2011 Link to this post

    Hi,

    I am creating a page which is based on the example called Load on Demand RadPageView of the TabStrip in Telerik's examples app.


    The code behind for the default page is:

    protected void Page_Load(object sender, EventArgs e)
       {
           if (!Page.IsPostBack)
           {
               AddTab("Home");
               AddPageView(DaveRadTabStrip.FindTabByText("Home"));
               AddTab("Apps");
               AddTab("Contact");
           }
       }
      
       private void AddTab(string tabName)
       {
           RadTab tab = new RadTab();
           tab.Text = tabName;
           this.DaveRadTabStrip.Tabs.Add(tab);
       }
      
       protected void DaveRadMultiPage_PageViewCreated(object sender, RadMultiPageEventArgs e)
       {
           string userControlName = @"~/UserControls/" + e.PageView.ID + ".ascx";
      
           Control userControl = Page.LoadControl(userControlName);
           userControl.ID = e.PageView.ID + "_userControl";
           e.PageView.Controls.Add(userControl);
       }
      
       private void AddPageView(RadTab tab)
       {
           RadPageView pageView = new RadPageView();
           pageView.ID = tab.Text;
           DaveRadMultiPage.PageViews.Add(pageView);
           tab.PageViewID = pageView.ID;
       }
      
       protected void DaveRadTabStrip_TabClick(object sender, RadTabStripEventArgs e)
       {
           AddPageView(e.Tab);
           e.Tab.PageView.Selected = true;   
       }


    The apps user control (for the Apps tab) has a TabStrip on it. So, I have tabs inside of a tab.

    There is a javascript function which is not working. On the tabs on the Apps user control, there are some hyperlinks which load a image into a "lightbox" using a jScript plugin called FancyBox. That plugin is not working. I recognise that Telerik makes no guarantee that its controls do not work with 3rd party controls (and fair enough). But I wanted a LightBox and Telerik does not have one (RadWindow comes close, but at the end of the day, that is not its purpose - and there's no elegant animation with RadWindow either).


    Here is the markup for that user control:


    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Apps.ascx.cs" Inherits="UserControls_Apps" %>
     
    <div id="contentOnPage">
     
            <telerik:RadCodeBlock runat="server" ID="FancyBoxCode">
                <script type="text/javascript" src='<%=Page.ResolveClientUrl("~/js/jquery.fancybox-1.3.1.js") %>'></script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $("a.lib").fancybox({
                            'transitionIdn': 'fade',
                            'transitionOut': 'fade'
                        });
                    });
                </script>
            </telerik:RadCodeBlock>
     
        <telerik:RadTabStrip ID="AppsRadTabStrip"
                             MultiPageID="AppsRadMultiPage"
                             SelectedIndex="0" ShowBaseLine="true"
                             runat="server">
            <Tabs>
                <telerik:RadTab Text="BookLender 2.0" PageViewID="BooklenderRadPageView2" />           
                <telerik:RadTab Text="ColorHexGrabber" PageViewID="ColorHexGrabberRadPageView" />
                <telerik:RadTab Text="BookLender 1.0" PageViewID="BooklenderRadPageView1" />
            </Tabs>
        </telerik:RadTabStrip><!--
                no spaces between the tabstrip and multipage, in order to remove unnecessary whitespace
        --><telerik:RadMultiPage ID="AppsRadMultiPage" SelectedIndex="0" runat="server" CssClass="page">
            <telerik:RadPageView ID="BooklenderRadPageView2" runat="server">
                    <div>
                         
                        <img src="./images/BookLender/book.png" alt="bookLender" />
     
                        <h3>Version 2.0</h3>                               
                        <p>Have you ever lost your favourite book because you forgot who you lent it to (and they never returned it)? </p>
     
                        <p>I designed and created bookLender to help people keep a record of the books which they lend, and to whom they lend those books.</p>
                         
                        <p>There is no cost to download and use it. There is only a 64 bit version of BookLender 2.0. So if your version of Windows is only 32 bit, version 1.0 is for you.</p>
     
                        <p>I've also taken the opportunity to update it from the university-level app that it was, to a more sophisticated version. Unfortunately, there is no update path, as the underlying database design is completely different.</p>
     
                        <p>bookLender has the following functions:</p>
                            <ul class="features">
                                <li>view all books which are currently lent to your friends</li>
                                <li>manage your home library -:
                                    <ul class="expanded">
                                        <li>add books </li>
                                        <li>delete books </li>
                                        <li>view a book's history</li>
                                    </ul>
                                </li>
                                <li>record a book-lending </li>
                                <li>record the return of a book</li>
                            </ul>   
                                     
                        <p>
                            <a class="lib" href="./images/BookLender/library.PNG">screen shot 1</a>
                            | <a class="lib" href="./images/BookLender/lended.PNG">screen shot 2</a>
                            | <a class="lib" href="./images/BookLender/history.PNG">screen shot 3</a>
                            | <a class="lib" href="./images/BookLender/authorsOfBook.PNG">screen shot 4</a>
                            | <a class="lib" href="./images/BookLender/manageUsers.PNG">screen shot 5</a>
                        </p>
                                                                         
                        <asp:Panel ID="DownloadPanel" GroupingText="Download Area" CssClass="downloadArea"  runat="server">                           
                                    <p><b>** Note ** </b> - you need to download and install the .NET Framework (v.4.0) to run bookLender 2.0.
                                    Think of it as C#'s version of the java runtime environment. You can find it at <a href="http://www.microsoft.com/downloads/en/default.aspx" >
                                    Microsoft's download center</a>.
                                    <p>You also need to download a copy of Microsoft's SQL Server Compact Database and install it (the 64 bit version). You can get those from the download centre referenced above.</p>
                                    <ul class="downloads">                                   
                                        <li><a href="./msi/BookLender2.0Setup.msi" >click here (698KB)</a> to download bookLender itself! (64 bit OS only)</li>
                                    </ul>
                        </asp:Panel>
                    </div>
            </telerik:RadPageView>
            <telerik:RadPageView ID="BooklenderRadPageView1" runat="server">
                    <div>
     
                        <img src="images/BookLender/book.png" alt="bookLender" />
     
                        <h3>Version 1.0</h3>                               
                        <p>Have you ever lost your favourite book because you forgot who you lent it to (and they never returned it)? </p>
     
                        <p>I designed and created bookLender to help people keep a record of the books which they lend, and to whom they lend those books.</p>
                         
                        <p>There is no cost to download and use it.</p>
     
                        <p>bookLender has the following functions:</p>
                            <ul class="features">
                                <li>view all books which are currently lent to your friends</li>
                                <li>manage your home library -:
                                    <ul class="expanded">
                                        <li>add books </li>
                                        <li>delete books </li>
                                        <li>view a book's history</li>
                                    </ul>
                                </li>
                                <li>record a book-lending </li>
                                <li>record the return of a book</li>
                            </ul>   
                                     
                        <p>
                            <a class="lib" href="./images/BookLender/bl1.png">screen shot 1</a> |
                            <a class="lib" href="./images/BookLender/bl2.png">screen shot 2</a>
                        </p>
                                                                         
                        <asp:Panel ID="DownloadPanelBL1" GroupingText="Download Area" CssClass="downloadArea"  runat="server">                           
                                    <p><b>** XP Users Note ** </b> - you need to download and install the .NET Framework (v.3.5) to run bookLender.
                                    Think of it as C#'s version of the java runtime environment. You can find it at <a href="http://www.microsoft.com/downloads/en/default.aspx" >
                                    Microsoft's download center</a>. (<b>Vista/Windows 7 users</b> do not need to do this.)</p>
                                    <p><b>** All users **</b> - you need to download a copy of Microsoft's SQL Server Compact Database and install it. 64 bit users need the 64 bit version and 32 bit users need the 32 bit version. You can get those from the download centre referenced above.</p>
                                    <ul class="downloads">                                   
                                        <li><a href="./msi/bookLender1.0Setup.msi" >click here (698KB)</a> to download bookLender itself!</li>
                                    </ul>
                        </asp:Panel>
                    </div>
            </telerik:RadPageView>
            <telerik:RadPageView ID="ColorHexGrabberRadPageView" runat="server">
                <div>
     
                    <img src="./images/ColorHexGrabber/hexLogo.png" alt="colorHexGrabber" />
     
                    <p>Being someone who uses CSS quite a bit, I wanted a quick and easy way of picking a colour and generating its respective
                    hexadecimal number.</p>
                                     
                    <p>Previously, I used to load up a full-scale photo editing suite (such as <a href="http://www.gimp.org/">GIMP</a>). Great as GIMP is, it was
                    using a lighthouse to do the job of a single match.</p>
     
                    <p>Rather than hunt around amongst the many and varied colour-choosing applications around, I decided to make my own. The
                    charter which I set myself was that this application had to have absolutely bare functionality. That functionality being,
                    to be able to:</p>    
                    <ul class = "features">
                        <li>pick a colour from a colour palette and extract its hexadecimal value; and</li>
                        <li>pick a colour from a loaded image and extract its hexadecimal value.</li>
                    </ul>   
                                     
                    <p>
                        <a class="lib" href="./images/ColorHexGrabber/chg1.png">screen shot 1</a> |
                        <a class="lib" href="./images/ColorHexGrabber/chg2.jpg">screen shot 2</a>
                    </p>                               
                                     
                    <asp:Panel ID="DownloadPanelCHG" GroupingText="Download Area" CssClass="downloadArea"  runat="server">
                            <b>** XP Users Note **</b> - you need to download and install the .NET Framework (v.3.5) to run colorHexGrabber.
                            Think of it as C#'s version of the java runtime environment. You can find it at <a href="http://www.microsoft.com/downloads/en/default.aspx" >
                            Microsoft's download center</a>. (<b>Vista/Windows 7 users</b> do not need to do this.)
                        <ul class="downloads">
                            <li><a href="./msi/colorHexGrabberSetup.msi">click here (326KB)</a> to download colorHexGrabber itself!</li>
                        </ul>
                    </asp:Panel>                               
                </div> <!--  close colorHexGrabber -->  
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>

    I really want to get to the bottom of this, to develop a better understanding of working with tabs, and AJAX and javascript and how they can all play well together. I need this skill for my job, where I develop enterprise apps using these tools. I'm happy to provide the whole VS solution if that helps (it is not that big, as I am just using it to learn concepts).

    Thanks

    Edit - further info. I have found that Fancybox will work without AJAX on the tabs. When I add the following AJAX, the FancyBox does not work:

    <telerik:RadAjaxManagerProxy ID="DaveRadAjaxManagerProxy" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="DaveRadTabStrip">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DaveRadTabStrip" LoadingPanelID="DarRadAjaxLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="DaveRadMultiPage" LoadingPanelID="DarRadAjaxLoadingPanel" />                   
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

  2. Answer
    Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 09 Mar 2011 Link to this post

    Hello David,

    The reason the FancyBox doesn't work with AJAX is because you javascript call:

    $(document).ready(function () {
                        $("a.lib").fancybox({
                            'transitionIdn': 'fade',
                            'transitionOut': 'fade'
                        });
                    });

    Is only attaching the fancybox when the page first loads, which is too early because the content in the RadMultiPage control has not loaded yet and will not work on the other tabs because the content is being loaded using AJAX, so the javascript call you put at the top of the page does not attach itself to those newly loaded elements.

    You'll need to call the piece of javascript on each ajax request so it setups on the facnybox on those links. To that you can modify the ResponseScripts collection of the RadAjaxManager in your AddPageView method. Like so:

    RadAjaxManager.GetCurrent(Page).ResponseScripts.Add("$(\"a.lib\").fancybox({ 'transitionIdn': 'fade','transitionOut': 'fade' }); ");

    I hope that helps.
  3. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 10 Mar 2011 Link to this post

    Hi Cori,

    Thanks Cori. That worked beautifully. Your explanation makes perfect sense as well.

    Cheers!
Back to Top