RadTabStrip + RadMultiPage: Fade between tab/pages?

[Sean]

Hi Telerik,

I am just brainstorming some ideas on ways to make my dashboard more visually appealing. On my dashboard I have multiple tabs associated with multiple page views. In addition, I have a timer which runs and, on tick, increments the tab's selected index.

This all works fine and dandy -- the tabs cycle between page views and the data displayed changes. That being said, it's almost 'too' snappy. Think like UpdatePanels updating without any flash and wondering 'woah, what just happened.'

As such, I was hoping to be able to fade in/fade out page views. Obviously this isn't inherently supported in the Telerik control suite (maybe it could be in the future? :) Would be very sexy), but I was wondering if you guys had any ideas on how to make this happen? I'm fine with it being a 'modern browser only' type of thing -- using CSS3/HTML5 opacity elements... but I wasn't really sure where to start.

What do you guys think? Maybe I should change the selected indices of the TabStrip and MultiPage, but then instead of telling an UpdatePanel to refresh the content of the MultiPage I could, instead, set a client-side opacity-fader to bring the new page view up?

Sean

[Dimitar Terziev]

Hi Sean,

You could achieve the desired behavior with the use of jQuery. I've made a sample page which you could use as a starting point.

All the best,
Dimitar Terziev
the Telerik team

[Sean]

Hi Dimitar,

Thank you for the jQuery code-snippet! I set up the Javascript and did observe fading between tabs as hoped. However, this seems to only occur when the user manually clicks between tabs, not when I programatically change between tabs server-side. 

I looked through the documentation, but didn't see something like "OnTabChanging." I was wondering if there is an event handler which would make the most sense to associate this code with.

Here's what I've got:

/// <summary>
/// Performs one tick of a timer on the chart.
/// Ticks based on time for testability and to prevent
/// weird cases when skipping the clock time forward.
/// </summary>
public void DoTimerCycleTick(object sender, TimerEventArgs eventArgs)
{
    GlobalSettings globalSettings = StateManager.GetStates<GlobalSettings>();

    if( globalSettings.CycleEnabled )
    {
        if (!Equals(DateTime.Now.CompareTo(globalSettings.TimeLastCycled.AddMinutes(globalSettings.CycleInterval)), -1)) //CompareTo returns -1 when time is earlier than.
        {
            int nextIndex = SelectedIndex + 1;

            if( nextIndex == Tabs.Count)
            {
                nextIndex = 0;
            }

            SelectedIndex = nextIndex;
            LayoutManager.Instance.MultiPage.SelectedIndex = nextIndex;
            LayoutManager.Instance.MultiPageUpdatePanel.Update();

            globalSettings.TimeLastCycled = DateTime.Now;
        }
    }

    StateManager.SaveGlobalSettings(globalSettings);
}

This is a method of my RadTabStrip object. Basically, at a given point in time, I trigger a tab-change by setting the TabStrip's index, the PageView's index, and then calling Update to visually change things. This does not trigger "OnClientTabSelecting."

Perhaps I am brute forcing it a bit too much by setting the indicies manually. Is there a more natural way to change the selected tab/pageview which would also trigger selection events?

Thanks,

Sean

EDIT: So, just looking through things a bit more, and I'm wondering if it would not be better to use something like...http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/Walkthrough/AnimationReference.aspx#FadeOutAnimation. It seems like this would allow me to do what I want server-side (albeit it it probably just goes behind-the-scenes and does it next-client-side). Admittedly, the concept of visually fading something server-side doesn't make much sense to me, but the bridge has to be crossed at some point in order to use my timer to fade between tabs. Still open to ideas though -- not going to go down the path of another third party control until I hear back from you guys :)

EDIT 2: I took a stab at it. 100% open for suggestion, but wanted my first attempt out there in code.

/// <summary>
/// Performs one tick of a timer on the chart.
/// Ticks based on time for testability and to prevent
/// weird cases when skipping the clock time forward.
/// </summary>
public void DoTimerCycleTick(object sender, TimerEventArgs eventArgs)
{
    GlobalSettings globalSettings = StateManager.GetStates<GlobalSettings>();

    if( globalSettings.CycleEnabled )
    {
        if (!Equals(DateTime.Now.CompareTo(globalSettings.TimeLastCycled.AddMinutes(globalSettings.CycleInterval)), -1)) //CompareTo returns -1 when time is earlier than.
        {
            int oldIndex = SelectedIndex;
            int newIndex = (oldIndex + 1) != Tabs.Count ? (oldIndex + 1) : 0;

            SelectedIndex = newIndex;
            LayoutManager.Instance.MultiPage.SelectedIndex = newIndex;
            //LayoutManager.Instance.MultiPageUpdatePanel.Update();
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "KEY", string.Format("OnServerTabSelected({0});", newIndex), true);
            globalSettings.TimeLastCycled = DateTime.Now;
        }
    }

    StateManager.SaveGlobalSettings(globalSettings);
}

var showLoadingPanel = true;
function OnServerTabSelected(newIndex) {
    var oldID = $find(multiPageID).get_selectedPageView().get_id();
    var newID = $find(multiPageID).get_pageViews().getPageView(newIndex).get_id();

    if ($telerik.$("#" + oldID).is(":visible")) {
        $telerik.$("#" + oldID).fadeOut(1000, function () {
            $telerik.$("#" + newID).fadeIn(1000, function () {
                showLoadingPanel = true;
                $find(multiPageID).set_selectedIndex(newIndex);
            });
        });

        showLoadingPanel = false;
        FixSplitter($find(rightPaneID));
        return;
    }
}

[Dimitar Terziev]

Hi Sean,

The suggested approach was for the cases when the selected tab is changed based on user interaction as you have noticed. In case you are changing the selected tab from code behind, then probably you should apply the fading animation upon page load. Please try to use the code in the OnClientLoad event of the RadTabStrip.

All the best,
Dimitar Terziev
the Telerik team

[Sean]

Hi Dimitar,

I looked up OnClientLoad in the documentation, but this seems to only fire when the RadTabStrip first initializes -- not when tabs/pageviews change. As such, I think I am OK with my current implementation, but I think it would be nice for there to be "OnClientTabChanging" and "OnClientTabChanged" events. Prooobably not worth putting in the PITS, though, as I doubt many people are interested in this feature :).

To anyone who does need this, here's what I ended up settling on

var showLoadingPanel = true;
function OnServerTabSelected(newID) {
    var oldID = $find(multiPageID).get_selectedPageView().get_id();

    $telerik.$("#" + oldID).fadeOut(1000, function () {
        $telerik.$("#" + newID).fadeIn(1000, function () {
            $find(multiPageID).findPageViewByID(newID).select();
            //Showing a loading panel while fading between tabs looks bad.
            showLoadingPanel = false;
            FixSplitter($find(rightPaneID));
            showLoadingPanel = true;
        });
    });
}

There's a subtle change from my post before, but it is important. I found that passing the index of the selected tab did not work in all scenarios. There are certain points in time, at least for my scenario, where the Client and Server are de-synched on the selected tabs. This is a side-effect of setting variables server-side, not calling UpdatePanel.Update(), and then moving to the client. As such, I pass the client id of the page view I wish to select. This is a better guarantee for selecting the proper control.

The showLoadingPanel flag is because the loading panel will clash with fading, but it is automatically applied. This was the easiest way for me to hide it, but I'm not vouching for using the practice everywhere.

If I find some time I'll write this into the public code base.. just a bit busy for now.

[Genady Sergeev]

Hi Sean,

Thank you for sharing this answer with the community.

Regards,
Genady Sergeev
the Telerik team