How do I rotate through a tabbed multipage user control.

[Stewart]

I'm investigating how to reproduce a control on the Oakgov.com website that is used to post news and announcements.  The control on this website uses flash, but I think that Telerik controls may be able to reproduce this behavior.  Does anyone have an example that I can follow?  (It's the control that has tabs labeled Featured, Video, Podcast News/Events.)

http://www.oakgov.com/index.html

Thanks in advance.

Ishmael

[Lini]

Hi,

I think that what you need can be accomplished relatively easy using only the RadTabStrip and RadMultiPage controls and their client API. The RadTabstrip client object can be used to automatically select the next tab using a window.setInterval() call. I am sending you a sample page that shows how to do this. The behavior of the tabstrip on the page should be the same as the site you showed.


Kind regards,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Stewart]

Thank you.  This works beautifully.

Kind regards,
Ishmael

[Stewart]

What is needed to make this code work as a webuser control?

I keep getting the following error meesage:
Line: 70
Error: 'null' is null or not an object

The code works on a normal page.

Thanks in advance.

[Lini]

Hello,

The client IDs of server controls are different if you are running the code in an user control. You will need to replace the following statements in the demo:

$find("tabstrip1");

with the real client ID. For example:

$find("<%= tabstrip1.ClientID %>");

This way the code will be able to find the control correctly.

Best wishes,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[louis chan]

Hi, that's cool and it seems better than mine! But I have a question on this example? Does this also support load on demand with user control just like this example?
The core of ajax is this javascript (args)

function onTabSelecting(sender, args) {
            if (args.get_tab().get_pageViewID()) {
                args.get_tab().set_postBack(false);
            }
        }

But I think nextFunc doesn't doing any postback. Would u please tell me how to set a post back just like the above code? Thx!

Regards.

[Simon]

Hello louis,

The nextFunc method uses TabStrip.set_selectedIndex(bool) to change the selected Tab and the latter triggers a postback. However you need to set the AutoPostBack property of the TabStrip to true to allow postbacks as they are disabled by default.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[louis chan]

Hi Simon,

Thx for the reply! I think the post back is only triggered by user-clicked.
What I want to do is when every tab is changed by the nextFunc or prevFunc, then it will send a post back to the server and then a user control will be loaded on demand. In order to prevent the whole page refresh, we can use ajaxmanager here. I think we can use jquery document.ready to monitor the user control is loaded to the page after the post back, so the window.setInterval can be called then. So I have asked how to simulate the user selected tab event.

PS:
I have changed this code, but it seems not working.

function onTabAutoSelecting(index) {
            var tabStrip = $find("<%= tabstrip1.ClientID %>");
            var tabToSelect = tabStrip.findTabByText("tab " + index);
            if (!tabToSelect) {
                alert("There is no tab with text \"" + index + "\"");
                return false;
            }
            tabToSelect.set_postBack(false);
            return false;
        }
function nextFunc(e)
        {
            if ((!e || e != "auto") && currentInterval)
            {
                window.clearInterval(currentInterval);
                currentInterval = null;
            }
            var tabstrip = $find("tabstrip1");
            var nextIndex = (tabstrip.get_selectedIndex() + 1)
            if (nextIndex >= tabstrip.get_tabs().get_count()) nextIndex = 0;
            automaticAdvance = true;
            tabstrip.set_selectedIndex(nextIndex);
            onTabAutoSelecting(nextIndex);
            automaticAdvance = false;
            if (!currentInterval) {
                currentInterval = window.setInterval(function () { nextFunc("auto"); }, 4000);
            }
        }

[Simon]

Hi louis chan,

By looking at your code I can see that you are setting the postBack property (Tab.set_postBack) of the Tab passed to the onTabAutoSlecting function to false. This prevents the postback from happening.

Have you tried setting the property to true when you want to programmatically select a Tab via set_selectedIndex()?

All the best,
Simon
the Telerik team

[louis chan]

Hi guys,

According to the original code, I have successfully to make a post back with user control load-on-demand.
Also, as Simon said, u have to set autopostback to true. Hope this help.

Here is the javascript:

function nextFunc(e) {
    if ((!e || e != "auto") && currentInterval) {
        window.clearInterval(currentInterval);
        currentInterval = null;
    }
    var tabstrip = $find("<%=rtsPlay.ClientID %>");
    var nextIndex = (tabstrip.get_selectedIndex() + 1)
    if (nextIndex >= tabstrip.get_tabs().get_count()) nextIndex = 0;
    automaticAdvance = true;
    //tabstrip.set_selectedIndex(nextIndex);
    //tabstrip.get_tabs().getTab(nextIndex).tabstrip.set_postBack(true);
    //tabstrip.get_tabs().getTab(nextIndex).set_selected(true);
    tabstrip.get_tabs().getTab(nextIndex).click();
    if (!currentInterval) {
        currentInterval = window.setInterval(function () { nextFunc("auto"); }, 4000);
    }
    automaticAdvance = false;

}