RadNavigation selected item is losing highlighting.

13 posts, 0 answers
  1. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 04 Mar 2015 Link to this post

    Hi,

    Thanks for the new control.

    I am having following problem with RadNavigation.

    1) If we click in the body anywhere in the page highlighted menu is unselected.
    How to keep selected Item highlighted?

    2) Theme is also different. We are using Metrotouch it seems different in RadNavigation and RadMenu.
     How can we change style of RadNavigation to be same as RadMenu?

    3) How to add default text when the window of browser is reduce to the minimal/Mobile size?

    Best Regards,
    Damodar
  2. Jerry Jansen
    Jerry Jansen avatar
    47 posts
    Member since:
    Aug 2009

    Posted 06 Mar 2015 in reply to Damodar Link to this post

    1) If we click in the body anywhere in the page highlighted menu is unselected.
    How to keep selected Item highlighted?

    I can confirm that this is a problem that needs to be fixed. I have a page with two telerik:RadNavigation
     controls on it and clicking anywhere on the page un-highlights both controls.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 09 Mar 2015 Link to this post

    Hello Damodar,

    Straight to the points:
    1) You can achieve such behavior by adding the following code :
    var $T = Telerik.Web.UI;
     
             $T.RadNavigation.prototype._deselectAll= function () {
                 return;
             }

    2) Please, apply the following CSS to achieve the same layout as RadMenu in MetroTouch skin
    html .RadNavigation_MetroTouch .rnvRootGroupWrapper {
        font-weight: 100;
        color: #fff;
        background: #25a0da;
        border-color: transparent;
    }
     
    html .RadNavigation .rnvRootLink {
        padding: 5px 15px;
    }
    html .RadNavigation .rnvRootGroup > .rnvItem {
        margin: 0;
    }
     
    html .RadNavigation_MetroTouch .rnvHovered.rnvMore,
    html .RadNavigation_MetroTouch .rnvHovered > .rnvRootLink {
        color: #fff;
        background: #25a0da;
        border-color: #92cfec;
    }


    3) Would you please elaborate a little bit what exactly are you trying to achieve when the size is reduces to minimal because it is not quite clear from the explanation provided.

    Hope this information will be helpful.

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 09 Mar 2015 in reply to Magdalena Link to this post

    Hi Magdalena,

    When you view the page in mobile/small screen mode you can see '\e0f1' symbol. There's no text in front of the symbol.
    Can we add selected menu text?
    Have added two images. Which shows navmenu in mobile/small screen mode without text and extended with selected text.
    If we can add selected menu/item text that will be great.

    Another question How to change the color of icon \e0f1?

    Best Regards,
    Damodar
    • \e0f1
    • \e0f1
  6. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 11 Mar 2015 Link to this post

    Hello Damodar,

    The text of selected item can be added to the DOM by JavaScript function on the OnClientNodeClicked event. Please, find a sample solution in the attachment.

    The following CSS rules will affect to the icon color in different states:
    /*normal state*/
    html .RadNavigation_MetroTouch .rnvMore {
        color: blue;
    }
     
    /*hover state*/
    html .RadNavigation_MetroTouch .rnvHovered.rnvMore {
        color: green;
    }
     
    /*expanded state*/
    html .RadNavigation_MetroTouch .rnvSelected.rnvMore {
        color: red;
    }


    Do not hesitate to contact us if you have other questions.


    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 18 Mar 2015 in reply to Magdalena Link to this post

    Hi Magdalena,

    In your example, when the page loads it is not setting any text to the navigation.

    Empty Text Image

    Still working on our solution to set the text.
    We are doing post back and the changes are lost.

    One more question Regarding licenses.licx.
    How can I remove it from our solution?


    Best Regards,
    Damodar
  8. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 18 Mar 2015 Link to this post

    Hello Damodar,

    We have tested the example and it works properly at our side. We are sending you this video as a part of the testing for your reference. Could you please open a support ticket so you will be able to provide us with a sample project where the issue is reproduced?

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 18 Mar 2015 in reply to Magdalena Link to this post

    Hi Magdalena,

    In your example, Can we set node2 be selected by default when page load?

    Best Regards,
    Damodar
  10. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 19 Mar 2015 Link to this post

    Hi Damodar,

    By setting the Selected property of NavigationNode to true, you will achieve selecting the item on page load:
    <telerik:NavigationNode Text="Node 2" Selected="true" />

    As the default background color of RadNavigation in MetroTouch skin is light gray, and selected state of item has blue border, that border will not be visible after the CSS customization which makes the control to be with blue background. You can apply the following, to make the border visible:
    html .RadNavigation_MetroTouch .rnvSelected.rnvMore,
    html .RadNavigation_MetroTouch .rnvSelected > .rnvRootLink,
    html .RadNavigation_MetroTouch .rnvExpanded > .rnvRootLink {
        border-color: #fff;
    }


    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 22 Mar 2015 in reply to Magdalena Link to this post

    Hi Magdalena,

    How to set node 2 be selected or selected menu item, when the navigation is in mobile mode?


    Best Regards,
    Damodar
  12. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 23 Mar 2015 Link to this post

    Hi Damodar,

    Actually this is an issue of the Navigation control. We have logged it for fixing and we will make our best to fix it as soon as possible. We would like also apologize for any inconvenience caused. Your points have been updated because of reporting the issue. For now you can apply the following workaround for preliminary solving the issue:
    var selectedNode;
     
    function pageLoad() {
        selectedNode = $find("RadNavigation1").get_selectedNode();
        $(".rnvMore").click(function () { setTimeout(onMoreClick, 100) });
    }
     
    function onMoreClick() {
        $(selectedNode.get_element()).addClass("rnvSelected");
    }

    Where RadNavigation1 is an ID of a Navigation control.

    Hoping this solution will meet your expectations.

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. MV
    MV avatar
    21 posts
    Member since:
    Dec 2015

    Posted 21 Nov in reply to Magdalena Link to this post

    Hi,

    I'm also having issue #1, I tried the suggested code and I get  "0x800a1391 - JavaScript runtime error: 'telerik' is undefined".

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
            <script type="text/javascript">
                var $T = Telerik.Web.UI;
                $T.RadNavigation.prototype._deselectAll = function () {
                    return;
                }
            </script>
    </telerik:RadCodeBlock>

    Any ideas?

    Thank you!

  14. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 24 Nov Link to this post

    Hi,

    Simply put the RadCodeBlock into the form element.

    Regards,
    Magdalena
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017