Telerik TabStrip w/ Google Maps On tabs other than Selected on load

5 posts, 0 answers
  1. Nelson
    Nelson avatar
    12 posts
    Member since:
    Nov 2010

    Posted 23 Aug 2011 Link to this post

    Hello,

    I have attached code that will allow you to recreate the issue. I want to embed google maps in a tab lay out. I want the map to be on the last tab.

    It seems if the tab is selected on page load, the map renders correctly but if not, it will not. To illustrate this, I made a tab strip with two tabs, each with an IFRAME inside. Play with SelectedIndex and what not to see what is happening.

    Essentially, whichever pageview will render the IFRAME correctly. I need a way to display the IFRAME on a tab that is not selected on load. Please advise.

    Thanks,
    Nelson

     

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>

    </head>
    <body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1"
    EnablePartialRendering="true"
    AsyncPostBackTimeOut="600"
    runat="server" >
    </telerik:RadScriptManager>

    <div>

    <telerik:RadTabStrip CausesValidation="false" ID="tabInspections" runat="server" Skin="Web20" Width="910px" CssClass="DetailsRadStrip" SelectedIndex="0" MultiPageID="mp1">

    <Tabs>
    <telerik:RadTab Text="1" Value="1" PageViewID="pv1" ></telerik:RadTab>
    <telerik:RadTab Text="2" Value="2" PageViewID="pv2" ></telerik:RadTab>
    </Tabs>
    </telerik:RadTabStrip>

    <telerik:RadMultiPage ID="mp1" runat="server" CssClass="pageView" Width="910px">
    <telerik:RadPageView ID="pv1" runat="server" Selected="true">
    <iframe ID="externalFrame" runat="server" frameborder="0" height="100%"
    scrolling="no" marginheight="0" marginwidth="0" style="display: block; text-align: left; " width="100%"></iframe>
    </telerik:RadPageView>
    <telerik:RadPageView ID="pv2" runat="server">
    <iframe ID="externalFrame2" runat="server" frameborder="0" height="100%"
    scrolling="no" marginheight="0" marginwidth="0" style="display: block; text-align: left; " width="100%"></iframe>
    </telerik:RadPageView>
    </telerik:RadMultiPage>
    </div>
    </form>
    </body>
    </html>


    Partial Class test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    externalFrame.Attributes.Add("src", "http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=495 Eastern Avenue, Chelsea, MA&aq=0&sll=42.348776,-71.072316&sspn=0.028482,0.026565&vpsrc=0&ie=UTF8&hq=&hnear=495 Eastern Ave, Chelsea, Massachusetts 02150&z=14&iwloc=A&output=embed")
    externalFrame2.Attributes.Add("src", "http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=495 Eastern Avenue, Chelsea, MA&aq=0&sll=42.348776,-71.072316&sspn=0.028482,0.026565&vpsrc=0&ie=UTF8&hq=&hnear=495 Eastern Ave, Chelsea, Massachusetts 02150&z=14&iwloc=A&output=embed")

    End Sub
    End Class

  2. Nelson
    Nelson avatar
    12 posts
    Member since:
    Nov 2010

    Posted 25 Aug 2011 Link to this post

    Has anyone had a chance to look at this yet? It is an important feature for us that we would like to incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 26 Aug 2011 Link to this post

    Hello Nelson,

    Instead of adding additional iframe to the RadPageView my suggestion is to use its ContentUrl property. The the above mentioned property is set to True the content from the URL is in fact rendered in iframe.

    Try the following implementation:
    <telerik:RadTabStrip CausesValidation="false" ID="tabInspections" runat="server"
              Skin="Web20" Width="910px" CssClass="DetailsRadStrip" SelectedIndex="1" MultiPageID="mp1">
              <Tabs>
                  <telerik:RadTab Text="1" Value="1" PageViewID="pv1">
                  </telerik:RadTab>
                  <telerik:RadTab Text="2" Value="2" PageViewID="pv2">
                  </telerik:RadTab>
              </Tabs>
          </telerik:RadTabStrip>
          <telerik:RadMultiPage ID="mp1" runat="server" CssClass="pageView" Width="910px" SelectedIndex="1">
              <telerik:RadPageView ID="pv1" runat="server" ContentUrl="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=495 Eastern Avenue, Chelsea, MA&aq=0&sll=42.348776,-71.072316&sspn=0.028482,0.026565&vpsrc=0&ie=UTF8&hq=&hnear=495 Eastern Ave, Chelsea, Massachusetts 02150&z=14&iwloc=A&output=embed">
              </telerik:RadPageView>
              <telerik:RadPageView ID="pv2" runat="server" ContentUrl="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=495 Eastern Avenue, Chelsea, MA&aq=0&sll=42.348776,-71.072316&sspn=0.028482,0.026565&vpsrc=0&ie=UTF8&hq=&hnear=495 Eastern Ave, Chelsea, Massachusetts 02150&z=14&iwloc=A&output=embed">
              </telerik:RadPageView>
          </telerik:RadMultiPage>
     

    Regards,
    Dimitar Terziev
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  5. Nelson
    Nelson avatar
    12 posts
    Member since:
    Nov 2010

    Posted 26 Aug 2011 Link to this post

    Excellent, Thank you!
  6. Justin Wong
    Justin Wong avatar
    1 posts
    Member since:
    Sep 2009

    Posted 31 Dec 2012 Link to this post

    For the RadPageView's ContentUrl, is it possible to programmatically load the URL while it's running?
    I've tried the Page_Load / Inline / and object PreRender, it doesn't seems to be working tho

    Any workaround for binding the URL on runtime?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017