How to Make PageView Disappear with Client-side Script

18 posts, 1 answers
  1. Doug
    Doug avatar
    73 posts
    Member since:
    Mar 2008

    Posted 16 Aug 2009 Link to this post

    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
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 20 Aug 2009 Link to this post

    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.
  3. Doug
    Doug avatar
    73 posts
    Member since:
    Mar 2008

    Posted 20 Aug 2009 Link to this post

    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
  4. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 20 Aug 2009 Link to this post

    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.
  5. Doug
    Doug avatar
    73 posts
    Member since:
    Mar 2008

    Posted 20 Aug 2009 Link to this post

    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
  6. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 21 Aug 2009 Link to this post

    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.
  7. Doug
    Doug avatar
    73 posts
    Member since:
    Mar 2008

    Posted 21 Aug 2009 Link to this post

    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
  8. Doug
    Doug avatar
    73 posts
    Member since:
    Mar 2008

    Posted 21 Aug 2009 Link to this post

    One last question, where do I hook up the recommended script?
  9. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 21 Aug 2009 Link to this post

    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.
  10. Doug
    Doug avatar
    73 posts
    Member since:
    Mar 2008

    Posted 24 Aug 2009 Link to this post

    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
  11. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 24 Aug 2009 Link to this post

    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.
  12. Doug
    Doug avatar
    73 posts
    Member since:
    Mar 2008

    Posted 24 Aug 2009 Link to this post

    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
  13. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 27 Aug 2009 Link to this post

    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.
  14. Doug
    Doug avatar
    73 posts
    Member since:
    Mar 2008

    Posted 28 Aug 2009 Link to this post

    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
  15. Dimitar Milushev
    Admin
    Dimitar Milushev avatar
    555 posts

    Posted 31 Aug 2009 Link to this post

    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.
  16. Doug
    Doug avatar
    73 posts
    Member since:
    Mar 2008

    Posted 31 Aug 2009 Link to this post

    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
  17. Dimitar Milushev
    Admin
    Dimitar Milushev avatar
    555 posts

    Posted 03 Sep 2009 Link to this post

    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.
  18. Doug
    Doug avatar
    73 posts
    Member since:
    Mar 2008

    Posted 03 Sep 2009 Link to this post

    Thank you, Dimitar.
Back to Top