How do I rotate through a tabbed multipage user control.

10 posts, 1 answers
  1. Stewart
    Stewart avatar
    7 posts
    Member since:
    Feb 2009

    Posted 06 Oct 2009 Link to this post

    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

  2. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 09 Oct 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stewart
    Stewart avatar
    7 posts
    Member since:
    Feb 2009

    Posted 09 Oct 2009 Link to this post

    Thank you.  This works beautifully.

    Kind regards,
    Ishmael
  5. Stewart
    Stewart avatar
    7 posts
    Member since:
    Feb 2009

    Posted 18 Nov 2009 Link to this post

    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.
  6. Answer
    Lini
    Admin
    Lini avatar
    2144 posts

    Posted 19 Nov 2009 Link to this post

    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.
  7. louis chan
    louis chan avatar
    50 posts
    Member since:
    Feb 2010

    Posted 15 Jul 2010 Link to this post

    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.
  8. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 16 Jul 2010 Link to this post

    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.
  9. louis chan
    louis chan avatar
    50 posts
    Member since:
    Feb 2010

    Posted 16 Jul 2010 Link to this post

    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);
                }
            }  

  10. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 21 Jul 2010 Link to this post

    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
  11. louis chan
    louis chan avatar
    50 posts
    Member since:
    Feb 2010

    Posted 31 Jul 2010 Link to this post

    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;
     
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017