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

How to Make PageView Disappear with Client-side Script

17 Answers 118 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Doug
Top achievements
Rank 1
Doug asked on 16 Aug 2009, 07:05 PM
Hello,

With my RadTabStrip, I have a PageView associated (PageViewID = ID) with some of my tabs.  I set_selected during the OnClientMouseOver event.  Not all tabs have a PageView.  Therefore, set_selected(-1) when there is no PageView.  This all works fine except that once a PageView has been selected it stays visible even after the user has moved away from the tabstrip and the PageView.

I tried using OnClientMouseOut to set_selected(-1).  But, that causes the wanted PageView to disappear when the user navigates from the current tab to the PageView below the tab.

Is there a way to either change set_selected(-1) after a period of time, displaying the PageView temporarily, or some other method of keeping the PageView active until the user has navigated completely away from the RadTabStrip and the PageView?

Any guidance would be greatly appreciated.

Thank you,

Doug

17 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 20 Aug 2009, 11:23 AM
Hello Doug,

Please find below a sample code snippet that shows the needed approach.

<form id="form1" runat="server"
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> 
 
    <script type="text/javascript"
        function changeTab(sender, eventArgs) { 
            var mp = $find('<%= RadMultiPage1.ClientID %>') 
            var item = eventArgs.get_tab(); 
            if (item.get_pageViewID() !== null) { 
                item.set_selected(true); 
            } 
            else { 
                item.set_selected(true); 
                mp.set_selectedIndex("-1"); 
            } 
        } 
    </script> 
 
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnClientMouseOver="changeTab" 
        MultiPageID="RadMultiPage1"
        <Tabs> 
            <telerik:RadTab runat="server" Text="Root RadTab1" PageViewID="RadPageView1"
            </telerik:RadTab> 
            <telerik:RadTab runat="server" Text="Root RadTab2"
            </telerik:RadTab> 
            <telerik:RadTab runat="server" Text="Root RadTab3" PageViewID="RadPageView2"
            </telerik:RadTab> 
            <telerik:RadTab runat="server" Text="Root RadTab4"
            </telerik:RadTab> 
            <telerik:RadTab runat="server" Text="Root RadTab5" PageViewID="RadPageView3"
            </telerik:RadTab> 
        </Tabs> 
    </telerik:RadTabStrip> 
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server"
        <telerik:RadPageView ID="RadPageView1" runat="server"
            tab 1 
        </telerik:RadPageView> 
        <telerik:RadPageView ID="RadPageView2" runat="server"
            tab 3 
        </telerik:RadPageView> 
        <telerik:RadPageView ID="RadPageView3" runat="server"
            tab 5 
        </telerik:RadPageView> 
    </telerik:RadMultiPage> 
    </form> 

In addition, you can take a look at this example that shows another possible approach.

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Doug
Top achievements
Rank 1
answered on 20 Aug 2009, 01:48 PM
Paul,

Thank you for your feedback.  To be clearer about the problem I am facing, I am able to properly select page views, just can't make them disappear if the user mouses away from the tabstrip.  Is there a OnClientPageViewMouseOut or equivalent?  The concept that I am trying to achieve is to hide all selected (and visible) page views if the user is not on the tabstrip or over a page view.  Ideas?

Many thanks,

Doug
0
Paul
Telerik team
answered on 20 Aug 2009, 02:38 PM
Hi Doug,

As already suggested, you can take a look at this example and use as a starting point for your implementation.

All the best,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Doug
Top achievements
Rank 1
answered on 20 Aug 2009, 04:47 PM
Hello again, Paul.

I had and did take a look at the example.  The example demonstrates the same issue I am seeking help resolving.  That is, that as soon as you stop hovering over (OnClientMouseOut) the parent or child tab, the child tabs return for the previously selected tab.  My problem is that there are no child tabs, just page views.  Thus, my OnClientMouseOver selects the appropriate page view, displays it, but then leaves it on the page until a tab that doesn't have a page view receives the mouseover.

I have submitted a support ticket for a separate problem - 236666.  This ticket includes site information and logon credentials.  I am hoping you can see the problem more clearly by simply looking at the site.  Hover over the Operations tab and then go to the page itself.  The tab stays.  I'd like to have it disappear at that point.  Can I use something like a OnMouseOut event for the <div> within which the control lives?

Thank you once again for your help and guidance.

Cheers,

Doug
0
Paul
Telerik team
answered on 21 Aug 2009, 08:36 AM
Hello Doug,

You can try using the following JS:

$telerik.$(".RadTabStrip").unbind("mouseleave").mouseleave(function (e) { 
        console.log(e); 
    if (e.relatedTarget.className != "subTabs") { 
        // hide multipage 
                $find('ctl00_PlaceHolderGlobalNavigation_PlaceHolderHorizontalNav_RadMultiPage1').set_selectedIndex("-1");  
    } 
}); 

Still, after we saw your code we were really shocked to see that you are trying to achieve the RadMenu functionality by using three other controls - RadTabstrip, RadMultipage and placeholders. RadMenu supports templates and you can place whatever content you need inside the RadMenuItem templates.

Best wishes,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Doug
Top achievements
Rank 1
answered on 21 Aug 2009, 01:41 PM
Thank you, Paul.

Had I not invested a ton of time into the RadTabStrip Classic I would have switched the RadMenu.  I tried using RadMenu originally but ran into all sorts of snags within the SharePoint environment.  Thinking the transition would be relatively easy from Classic to Ajax, I did not switch controls.  In hindsight, that was a bad decision.  Now that time is out, I must stick to the RadTabStrip and press on.

I will implement your solution.  It looks like the answer for now.  The next version, the tabstrip will be replaced with RadMenu.

Thank you again,

Doug
0
Doug
Top achievements
Rank 1
answered on 21 Aug 2009, 01:53 PM
One last question, where do I hook up the recommended script?
0
Accepted
Paul
Telerik team
answered on 21 Aug 2009, 02:03 PM
Hello Doug,

You can simply place that JS after the tabstrip's declaration (in <script> tag, of course).

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Doug
Top achievements
Rank 1
answered on 24 Aug 2009, 01:27 PM
Hello Paul,

I had a chance to try the script.  Unfortunately, it did not work as desired.  It functioned similar to doing a OnClientMouseOut for the tabstrip.  As soon as I move down from the current tab the page view below closes.  Also, it did not seem to work at all within FireFox and Safari.  It's not on the page for testing at the moment.

How should I proceed?  Is there a piece to the puzzle that is missing?

Thanks again for your help with this one.

Cheers,

Doug
0
Paul
Telerik team
answered on 24 Aug 2009, 01:54 PM
Hello Doug,

I'm afraid there's not much we can do for the moment. Your scenario is quite complicated and as already stated, quite unusual (actually, this is the first time we see a menu navigation made out of two other controls).

If you really need our further help on the matter, I think it will be best if you can reproduce the issue in a standalone project and send it to us (incl. your custom skin, CSS, images, DB backup if needed and so on). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Best wishes,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Doug
Top achievements
Rank 1
answered on 25 Aug 2009, 02:03 AM
Paul,

Once again, thank you.  I have taken your advice and am in the process of converting to RadMenu.  So far, the transition seems easy.  The skin will take awhile, but the investment is worth it.

A quick related question:

I noticed that the selected menu item does not stay selected/highlighted.  Do I need to do a client-side set_selected(x) or does the control maintain the selection?

Thank you for all your help and your advice. 

Cheers,

Doug
0
Paul
Telerik team
answered on 27 Aug 2009, 11:54 AM
Hello Doug,

Please refer to this example that shows the needed approach.

Greetings,
Paul
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
Doug
Top achievements
Rank 1
answered on 28 Aug 2009, 05:18 PM
Hello Paul,

Thank you so much for pointing me to the example.  I like this approach.  Unfortunately, this approach may become an administrative nightmare and somewhat impossible within the constraints of the SharePoint environment.  My Menu is populated using this within SharePoint:

      <asp:SiteMapDataSource
        ShowStartingNode="False"
        SiteMapProvider="SPNavigationProvider"
        id="topSiteMap"
        runat="server"
        StartingNodeUrl="sid:1002"/>

I also add child items from a list within SharePoint during the Pre_Render.  The issue would be having an administrator remember to properly add an Url property such as "Page."  This may be expecting too much from them.  Plus, there are HTTP Link field limitations within SharePoint which in some cases are already maxed out.  Nevertheless, I would like to find another way to accomplish the goal.

I tried using this client-side code to set_selected when a menu item is clicked with hopes that I could use RadMenuItem - SelectedItem:

function OnClientMenuClickingHandler(sender, eventArgs)
{
 if(eventArgs.get_item().get_navigateUrl().toLowerCase().indexOf("go_nowhere") > -1)
 {     
  eventArgs.set_cancel(true);
 }else{
  eventArgs.set_cancel(false);
 }
 eventArgs.get_item().set_selected(true)
}

Unfortunately, nothing was returned within the Page_Load.

Do you have any other suggestions or examples whereby I might achieve the goals of the earlier example?

I sincerely appreciate the help.  Obviously, I try to work these things out through example and forum examination before I ask for help.  So, my apologies for missing things here and there.  SharePoint obviously adds a complexity to the challenges too.

Cheers,

Doug
0
Dimitar Milushev
Telerik team
answered on 31 Aug 2009, 03:51 PM
Hello Doug,

You don't need to use a query string parameter to track the current page - this is used in the example to simplify the structure of the example. You can use the name of the .aspx or title of the page to track the current page.

If you use the RadMenu for navigation and clicking on an item navigates to a different page instead of doing a postback, the Menu won't have a selected item.  The new page has a 'different' RadMenu so to say.

All the best,
Dimitar Milushev
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
Doug
Top achievements
Rank 1
answered on 31 Aug 2009, 09:49 PM
Hello Dimitar,

I'm close to making this work, but I am getting unusual results.  This segment sits within my server-side Pre_Render:

            StreamWriter sw = new StreamWriter("C:\\Documents and Settings\\All Users\\Documents\\test.txt", true);

            sw.WriteLine( "Request.Url.PathAndQuery is " + Request.Url.PathAndQuery);

            RadMenu rm = (RadMenu)FindControlRecursive(Page, "RadMenu1");

            RadMenuItemCollection rmic = rm.Items;

            foreach (RadMenuItem rItm in rmic) { sw.WriteLine("NavigateUrl is " + rItm.NavigateUrl + " for RadMenuItem " + rItm.Text); }

            RadMenuItem currentItem = (RadMenuItem) rm.FindItemByUrl(Request.Url.PathAndQuery);

            if (currentItem != null)
            {
                currentItem.HighlightPath();
                sw.WriteLine("HighlightPath for " + currentItem.Text);
            }
            else { sw.WriteLine("currentItem is null"); }

            sw.Close();


As you can see by the this output, the FindItemByUrl often doesn't find a legitimate matched Url:

Request.Url.PathAndQuery is /sites/master/Community/Site%20Pages/Contacts.aspx
NavigateUrl is /sites/master/community/default.aspx for RadMenuItem Home
NavigateUrl is /sites/master/community/board/default.aspx for RadMenuItem Board
NavigateUrl is /sites/master/community/site%20pages/operations.aspx for RadMenuItem Operations
NavigateUrl is /sites/master/community/committees/default.aspx for RadMenuItem Committees
NavigateUrl is /sites/master/community/Clubs/default.aspx for RadMenuItem Clubs
NavigateUrl is /sites/master/site%20pages/go_nowhere.aspx for RadMenuItem My Account
NavigateUrl is /sites/master/Community/Site%20Pages/Contacts.aspx for RadMenuItem Contact Us
currentItem is null

(The %20 (space) seems to be the common factor causing things to not work at times.  I do not have the option of changing the SharePoint folder names or file names to exclude spaces.  Any attempt to eliminate them would be quickly circumvented by users.)

Request.Url.PathAndQuery is /sites/master/community/Site%20Pages/Concierge.aspx
NavigateUrl is /sites/master/community/default.aspx for RadMenuItem Home
NavigateUrl is /sites/master/community/board/default.aspx for RadMenuItem Board
NavigateUrl is /sites/master/community/site%20pages/operations.aspx for RadMenuItem Operations
NavigateUrl is /sites/master/community/committees/default.aspx for RadMenuItem Committees
NavigateUrl is /sites/master/community/Clubs/default.aspx for RadMenuItem Clubs
NavigateUrl is /sites/master/site%20pages/go_nowhere.aspx for RadMenuItem My Account
NavigateUrl is /sites/master/Community/Site%20Pages/Contacts.aspx for RadMenuItem Contact Us
currentItem is null

Request.Url.PathAndQuery is /sites/master/community/site%20pages/operations.aspx
NavigateUrl is /sites/master/community/default.aspx for RadMenuItem Home
NavigateUrl is /sites/master/community/board/default.aspx for RadMenuItem Board
NavigateUrl is /sites/master/community/site%20pages/operations.aspx for RadMenuItem Operations
NavigateUrl is /sites/master/community/committees/default.aspx for RadMenuItem Committees
NavigateUrl is /sites/master/community/Clubs/default.aspx for RadMenuItem Clubs
NavigateUrl is /sites/master/site%20pages/go_nowhere.aspx for RadMenuItem My Account
NavigateUrl is /sites/master/Community/Site%20Pages/Contacts.aspx for RadMenuItem Contact Us
currentItem is null

Request.Url.PathAndQuery is /sites/master/community/default.aspx
NavigateUrl is /sites/master/community/default.aspx for RadMenuItem Home
NavigateUrl is /sites/master/community/board/default.aspx for RadMenuItem Board
NavigateUrl is /sites/master/community/site%20pages/operations.aspx for RadMenuItem Operations
NavigateUrl is /sites/master/community/committees/default.aspx for RadMenuItem Committees
NavigateUrl is /sites/master/community/Clubs/default.aspx for RadMenuItem Clubs
NavigateUrl is /sites/master/site%20pages/go_nowhere.aspx for RadMenuItem My Account
NavigateUrl is /sites/master/Community/Site%20Pages/Contacts.aspx for RadMenuItem Contact Us
HighlightPath for Home

Request.Url.PathAndQuery is /sites/master/default.aspx
NavigateUrl is /sites/master/default.aspx for RadMenuItem Home
NavigateUrl is /sites/master/site%20pages/classifieds.aspx for RadMenuItem Classifieds
NavigateUrl is /sites/master/site%20pages/contact%20us.aspx for RadMenuItem Contact Us
HighlightPath for Home

Request.Url.PathAndQuery is /sites/master/site%20pages/classifieds.aspx
NavigateUrl is /sites/master/default.aspx for RadMenuItem Home
NavigateUrl is /sites/master/site%20pages/classifieds.aspx for RadMenuItem Classifieds
NavigateUrl is /sites/master/site%20pages/contact%20us.aspx for RadMenuItem Contact Us
currentItem is null

Request.Url.PathAndQuery is /sites/master/default.aspx
NavigateUrl is /sites/master/default.aspx for RadMenuItem Home
NavigateUrl is /sites/master/site%20pages/classifieds.aspx for RadMenuItem Classifieds
NavigateUrl is /sites/master/site%20pages/contact%20us.aspx for RadMenuItem Contact Us
HighlightPath for Home

Request.Url.PathAndQuery is /sites/master/community/default.aspx
NavigateUrl is /sites/master/community/default.aspx for RadMenuItem Home
NavigateUrl is /sites/master/community/board/default.aspx for RadMenuItem Board
NavigateUrl is /sites/master/community/site%20pages/operations.aspx for RadMenuItem Operations
NavigateUrl is /sites/master/community/committees/default.aspx for RadMenuItem Committees
NavigateUrl is /sites/master/community/Clubs/default.aspx for RadMenuItem Clubs
NavigateUrl is /sites/master/site%20pages/go_nowhere.aspx for RadMenuItem My Account
NavigateUrl is /sites/master/Community/Site%20Pages/Contacts.aspx for RadMenuItem Contact Us
HighlightPath for Home

Request.Url.PathAndQuery is /sites/master/community/Clubs/default.aspx
NavigateUrl is /sites/master/community/default.aspx for RadMenuItem Home
NavigateUrl is /sites/master/community/board/default.aspx for RadMenuItem Board
NavigateUrl is /sites/master/community/site%20pages/operations.aspx for RadMenuItem Operations
NavigateUrl is /sites/master/community/committees/default.aspx for RadMenuItem Committees
NavigateUrl is /sites/master/community/Clubs/default.aspx for RadMenuItem Clubs
NavigateUrl is /sites/master/site%20pages/go_nowhere.aspx for RadMenuItem My Account
NavigateUrl is /sites/master/Community/Site%20Pages/Contacts.aspx for RadMenuItem Contact Us
HighlightPath for Clubs

Other than level 1 items not showing, I cannot understand why the "/sites/master/site%20pages/classifieds.aspx" is considered a match to "/sites/master/site%20pages/classifieds.aspx" for example.  Am I missing something, other than the noted %20 (space) concern?

Your help would be very much appreciated.

Cheers,

Doug
0
Dimitar Milushev
Telerik team
answered on 03 Sep 2009, 11:40 AM
Hello Doug,

This will work if you encode the URL before searching:

     rm.FindItemByUrl(HttpUtility.UrlEncode(Request.Url.PathAndQuery));

Sincerely yours,
Dimitar Milushev
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
Doug
Top achievements
Rank 1
answered on 03 Sep 2009, 02:12 PM
Thank you, Dimitar.
Tags
TabStrip
Asked by
Doug
Top achievements
Rank 1
Answers by
Paul
Telerik team
Doug
Top achievements
Rank 1
Dimitar Milushev
Telerik team
Share this question
or