This is a migrated thread and some comments may be shown as answers.

How do I rotate through a tabbed multipage user control.

9 Answers 87 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Stewart
Top achievements
Rank 1
Stewart asked on 06 Oct 2009, 04:24 PM

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

9 Answers, 1 is accepted

Sort by
0
Lini
Telerik team
answered on 09 Oct 2009, 06:42 AM
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.
0
Stewart
Top achievements
Rank 1
answered on 09 Oct 2009, 05:50 PM
Thank you.  This works beautifully.

Kind regards,
Ishmael
0
Stewart
Top achievements
Rank 1
answered on 18 Nov 2009, 08:23 PM
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.
0
Accepted
Lini
Telerik team
answered on 19 Nov 2009, 07:45 AM
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.
0
louis chan
Top achievements
Rank 1
Iron
answered on 15 Jul 2010, 04:12 PM
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.
0
Simon
Telerik team
answered on 16 Jul 2010, 09:36 AM
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.
0
louis chan
Top achievements
Rank 1
Iron
answered on 16 Jul 2010, 04:00 PM
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);
            }
        }  

0
Simon
Telerik team
answered on 21 Jul 2010, 04:44 PM
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
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
0
louis chan
Top achievements
Rank 1
Iron
answered on 31 Jul 2010, 04:21 PM
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;
 
}
Tags
Rotator
Asked by
Stewart
Top achievements
Rank 1
Answers by
Lini
Telerik team
Stewart
Top achievements
Rank 1
louis chan
Top achievements
Rank 1
Iron
Simon
Telerik team
Share this question
or