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

RadNavigation selected item is losing highlighting.

12 Answers 262 Views
Navigation
This is a migrated thread and some comments may be shown as answers.
Damodar
Top achievements
Rank 1
Damodar asked on 04 Mar 2015, 11:15 PM
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

12 Answers, 1 is accepted

Sort by
0
Jerry Jansen
Top achievements
Rank 1
answered on 06 Mar 2015, 02:59 PM
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.
0
Magdalena
Telerik team
answered on 09 Mar 2015, 09:14 AM
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.

 
0
Damodar
Top achievements
Rank 1
answered on 10 Mar 2015, 01:26 AM
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
0
Magdalena
Telerik team
answered on 11 Mar 2015, 11:27 AM
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.

 
0
Damodar
Top achievements
Rank 1
answered on 18 Mar 2015, 05:18 AM
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
0
Magdalena
Telerik team
answered on 18 Mar 2015, 01:28 PM
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.

 
0
Damodar
Top achievements
Rank 1
answered on 18 Mar 2015, 10:02 PM
Hi Magdalena,

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

Best Regards,
Damodar
0
Magdalena
Telerik team
answered on 19 Mar 2015, 09:44 AM
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.

 
0
Damodar
Top achievements
Rank 1
answered on 23 Mar 2015, 02:11 AM
Hi Magdalena,

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


Best Regards,
Damodar
0
Magdalena
Telerik team
answered on 23 Mar 2015, 11:01 AM
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.

 
0
MV
Top achievements
Rank 1
answered on 21 Nov 2016, 08:13 PM

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!

0
Magdalena
Telerik team
answered on 24 Nov 2016, 09:21 AM
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.
Tags
Navigation
Asked by
Damodar
Top achievements
Rank 1
Answers by
Jerry Jansen
Top achievements
Rank 1
Magdalena
Telerik team
Damodar
Top achievements
Rank 1
MV
Top achievements
Rank 1
Share this question
or