iFrame rendering problem

[Andy Green]

Hi

I have a RadSlider on a page which renders correctly if the page is opened directly, however when the page is in an iframe the control is not rendered properly.

I get the up / down buttons and the slider image, but no bar, it only renders if the control is refreshed for example by having it as an updated control from RadAjaxManager.

Any ideas?

Andy

[Tsvetie]

Hello Andy Green,
I tried to reproduce the problem you have, but to no avail - please, find my test pages attached. The problem you describe seems similar to the one described in this knowledgebase article. Could you please check if the problem is the same and whether the suggested approach works for you?

In case this information does not help you, please open a new support ticket and send us a running test project that demonstrates the problem.

All the best,
Tsvetie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Andy Green]

Hi

I still have a problem with this, but I've managed to find the exact cause, if not the fix.

The problem occurs if the slider is in an iframe, and that iframe is in a RadPageview that is not the default selected view.

To reiterate this occurs if a slider is in a page on a tab that is not initially visible. If I change the order of the tabs, so that the page with the slider is visible when the tab control renders it is OK.

I am using to redraw the contol and using a javascript alert() to prove the code it hit, which it is.

                function SliderLoaded(sender, args) {
                    sender.repaint();
                    $get("txtSliderValueArrivals").value = sender.get_value();
                }

Any further ideas, as I cant continue with the tab views as they are now.

Andy

[Tsvetie]

Hi Andy,
In case both the RadTabScript and the RadSlider controls were part of the same page, the page view will automatically call the repaint method of the slider as soon as the page view becomes visible. In your case, however, as the slider is part of a different page, the page view cannot do this and you have to do it yourself.

Basically, you need to do the following:

1. Attach a handler for the OnClientTabSelected event of the tabstrip.
2. In the handler, get a reference to the slider in the other page.
3. Call the repaint method of the slider.

I have listed below links to resources that you might find useful:

• OnClientTabSelected http://www.telerik.com/help/aspnet-ajax/tab_tabstrip_onclienttabselected.html
• calling a method from another page in the same security domain - http://www.telerik.com/support/kb/aspnet-ajax/splitter/referencing-content-page-in-a-splitter-pane-from-the-parent-page-and-vice-versa.aspx
• RadSlider client-side API - http://www.telerik.com/help/aspnet-ajax/slider_clientbasics.html

Greetings,
Tsvetie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[vivek]

Hi Tsvetie

I am having problem with TAB IFrame.I am having three TAB. Each Tab is having IFrame and src of the IFrame is opening a url of the different server.

 

 

Me.IFrame.Attributes("src") = strWebApplLink.Trim()

 

Now wat is happening, when i click TAB1,it works properly. Clicking the TAB2 also work fine. But When i repeat this work, I am getting the JavaScript Error(ext-all.js) with height error incorrect. Error comes in form of JavaScript popup."Do You want to debug".when i click NO. It properly open the requested URL .I have no idea to fix this problem.

Your help will be appritiated.Thanks in Advance

[Tsvetie]

Hello vivek,
Could you please provide additional information on your setup? For example, which Telerik controls you use, how you have configured them and what steps you follow in order to reproduce the problem? It would be best if you post the code of a simple test page that demonstrates the JS error as well.

Regards,
Tsvetie
the Telerik team

[vivek]

Thank you for much awaited solution. I tried the same but still i am getting the ext-all.js error says that "An error occured at line no 7. Do you want to debug" If i click YES i redirect to thr codebase of a javascript file ext-all.js. no idea where is this .js file coming.

I wondered wat to do with my code.

Here is  my code

<telerik:RadTabStrip ID="RadTabStrip1" runat="server"  Skin="Outlook" OnClientTabSelected="ClientTabSelectedHandler" MultiPageID="RadMultiPage1"
                         SelectedIndex="0">
                         <tabs>
                 <telerik:RadTab Text="TAB1">
                </telerik:RadTab>
                 <telerik:RadTab Text="TAB2">
                 </telerik:RadTab>
                 <telerik:RadTab Text="TAB3">
                 </telerik:RadTab>
                 </tabs>
                     </telerik:RadTabStrip>
                     <iframe id="iframePreview" scrolling="yes" height="475" width="100%"></iframe>

JavaScript

function ClientTabSelectedHandler(sender, args) {
          var id;
          var tab = args.get_tab();
          var iFrame = document.getElementById("iframePreview");

          if (tab.get_text() == "TAB1") {
            iFrame.src = "http://www.google.com";

          }
          else if (tab.get_text() == "TAB2") {
          iFrame.src = "http://www.yahoo.com ;           }
          else if (tab.get_text() == "TAB3") {
          iFrame.src = "http://www.msn.com";
          }
      }

Need your expert comment over it.

Thanks in advance

[Tsvetie]

Hello,
I created a simple test page, based on the code that you provided. However, I was not able to reproduce the JS error following the steps you provided in your first post:

1. Click on TAB1
2. Click on TAB2
3. Click on TAB1
4. Click on TAB2

Perhaps, I am missing something. I have attached my test page for your reference.

In case you only get the error, when loading the pages from your original project, I suppose the problem is in the pages that you load. You should check those pages to see which part of the code in them loads the ext-all.js file - e.g. a third party control, a script reference, etc. At this point, I can only assure you, that no Telerik control loads a JS file with this name.

Best wishes,
Tsvetie
the Telerik team