RadNavigation selected item is losing highlighting.

[Damodar]

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

[Jerry Jansen]

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.

[Magdalena]

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

 

 

[Damodar]

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

[Magdalena]

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

 

 

[Damodar]

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

[Magdalena]

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

 

 

[Damodar]

Hi Magdalena,

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

Best Regards,
Damodar

[Magdalena]

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

 

 

[Damodar]

Hi Magdalena,

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


Best Regards,
Damodar

[Magdalena]

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

 

 

[MV]

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!

[Magdalena]

Hi,

Simply put the RadCodeBlock into the form element.

Regards,
Magdalena
Telerik by Progress