Client-side rendering of pageviews

[Scott R]

Hi,

I have a page with a tab strip that contains dynamic tabs. Tabs are added/removed based on user actions. In the initial version, everything was being done on the server side (with postbacks). Depending on the selected tab the appropriate user control was loaded and displayed (server-side). I see that this technique is recommended here: http://www.telerik.com/community/forums/thread/b311D-behchh.aspx

Unfortunately, performance using postbacks is not good in IE. The problem appears to be with IE's handling of partial page updates (FireFox and Chrome are pretty fast). I don't think it has anything to do with the telerik controls. But since IE is the dominant browser we have to solve this problem.

I decided to add/remove tabs on the client-side - which works great. I also add/remove page views on the client - which also works great. And, when users switch tabs it's very fast - which is also great. So for the most part, everything is great.

Now the questions:

1. What is the "recommended" way to load content into a page view created on the client? All of the contents for the various types of tabs are already neatly divided into separate user controls. In my current "client-side" version I am simply putting an iframe into the page view then setting the src to a page that contains the appropriate user control. This is okay, I guess, but it makes javascript calls between the main page and the tab contents messier (not impossible, just messier). I *think* I would like to just set the innerHTML of the page view "get_element()", but I'm afraid that the start-up scripts defined in the user control may not execute.

2. When I set the innerHTML of the "get_element()" result to an iframe, it leaves a gap at the top and bottom. I have set the height/width of the iframe to 100%. I can't tell if the gap is coming from the iframe or the page view. How do I get the iframe to fill the entire page view (and the page view to fill it's entire parent)?

Here's the javascript I'm using to create the tabs and page views:

function ShowTab(tabText, tabId, tabType)
{
    // See if the specified tab already exists.
    var tab = GetTab(tabId);
    if (!tab)
    {
        // Tab doesn't exist, create a new one.
        tab = new Telerik.Web.UI.RadTab();
        tab.set_value(tabId);

        // Add the new tab to the tab strip.
        var tabstrip = Main_GetTabStrip();
        tabstrip.get_tabs().add(tab);
    }

    // Set the tab text (title).
    tab.set_text(tabText);

    // "refresh" determines whether the tab contents must be refreshed.
    // (e.g. new contents for an existing tab)
    var refresh = false;

    // See if the page view already exists.
    var page = GetPageView(tabId);
    if (!page)
    {
        // Page view doesn't exist for this tab, create a new one.
        page = new Telerik.Web.UI.RadPageView();
        page.set_id(tabId);

        // Add the new page view to the multi-page.
        var multipage = Main_GetMainMultiPage();
        multipage.get_pageViews().add(page);

        // Create a hidden field inside the page view to hold the "TabType".
        // Also, add an iframe to the page view. This iframe is where the
        // tab contents will appear.
        var dom = page.get_element();
        dom.innerHTML = '<input id="'+tabId+'_TabType" type="hidden" value="'+tabType+'" /><iframe id="'+tabId+'_iframe" src="#" style="border: 0; margin: 0; padding: 0; width: 100%; height: 100%;" frameborder="0" height="100%" width="100%" />';

        // Since this is a new page view, the contents should be refreshed.
        refresh = true;
    }
    else
    {
        // Page already exists. See if we need to refresh the contents.
        var x = document.getElementById(tabId+'_TabType');
        if (x.value != tabType)
        {
            // The TabType of the existing tab doesn't match the tabType
            // passed in to this function. That means that the same tab
            // is being used for different content, so we need to "refresh"
            // the tab contents.
            refresh = true;
            x.value = tabType;
        }
    }

    // Make this tab the "selected" tab. Since the page view Id matches the
    // tab Id, this also makes the associated page view visible.
    tab.select();

    if (refresh)
        // Call a web service to get the tab contents.
        IME.GetTabInformation(tabText, tabId, tabType, ShowTabComplete);
}

The web service returns the tab "contents" - which as of right now is just a URL to display inside the iframe. It would be trivial to have the web service return the actual HTML to display inside the page view, but as I said I'm afraid that the javascript would fail. Here's the javascript that executes when the web service completes:

function ShowTabComplete(results)
{
    // Find the tab based on the TabId.
    var tab = GetTab(results.TabId);

    // The web service results may want to change
    // the tab text (title).
    tab.set_text(results.TabText);

    // Get the iframe for this tab.
    var ifrm = document.getElementById(results.TabId+'_iframe');

    // The web service tells us the URL of the tab contents.
    ifrm.src = results.Url;
}

[Atanas Korchev]

Hello Scott R,

Up to your questions:

It is possible to set the innerHTML of the pageView to the contents of your user control but as you suggested JavaScript will not be executed. You could possibly execute them by hand or extract them in external JavaScript file which is always loaded.

I couldn't reproduce the whitespace problem. Please try fully closing the iframe tag (with </iframe>). Browsers may act strangely if you don't. To set the width and height of the PageView you can use either the Width and Height properties or JavaScript:

pageView.get_element().style.width = "100px";

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Scott R]

Hi Albert,

Setting pageView.get_element().style.height = "100%" worked great. Thanks for the quick reply.

Scott

[Doug Beard]

get_element().style.width on Multipage or Pageview produces this error:
'Object doesn't support this method' ? 


I also tried get_element().width since the multipage doesn't seem to support the style attribute, which seems to be an oversite.
The multipage style is overriding the pageview on post.