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

Adaptive Behaviour

5 Answers 87 Views
Navigation
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 02 Apr 2015, 09:25 AM
I am experimenting with this new control bound to a SiteMapDataSource. I am finding that, even when there is acres of space to display all the top level nodes, the final top level node always ends up under the sandwich-like button. Is there any way to fix this so that the control displays all top level nodes when there is sufficient space to do so?




5 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 02 Apr 2015, 10:45 AM
Hello,

This is a known issue. You can vote for it on its Ideas & Feedback Portal item. You could also subscribe for it to receive updates for status and comment it. The fix is "In development" at the moment. You could use the following workaround script for the time being and remove it once the issue is fixed:

<script>
            var $ = $telerik.$;
 
            Telerik.Web.UI.RadNavigation.prototype._calculateWidth = function (elements) {
                var $element = $(this.get_element()),
                navWidth = $element.width(),
                indexOfLastElement = null,
                rootElementsWidth = 0,
                defaultWidthOffset = 15,
                supportsMedia = "matchMedia" in window;
 
                if (supportsMedia && !window.matchMedia("(min-width: " + this._minWidth + "px)").matches) {
                    return 0;
                }
 
                for (var i = 0; i < elements.get_count() ; i++) {
                    var currentNode = elements._data[i];
 
                    if (currentNode._visible) {
                        rootElementsWidth += $(currentNode.get_element()).outerWidth() - 1;
                    }
 
                    if (rootElementsWidth - 1 >= navWidth) {
                        indexOfLastElement = i;
                        break;
                    }
                }
 
                return indexOfLastElement;
            }
        </script>


Regards,
Dimitar
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Jon
Top achievements
Rank 1
answered on 02 Apr 2015, 11:00 AM
Dimitar, whilst I can confirm that your workaround does ensure that all the 1st level nodes display (thanks) it does also seem to mean that the 'sandwich' icon is gone for good. If I shrink the page width it doesn't reappear, the control remains the same width and scrolls off the page (which rather defeats the object).













0
Dimitar
Telerik team
answered on 02 Apr 2015, 11:58 AM
Hello,

I am not able to reproduce the issue that you described on my side. It may be connected to some custom styles or scripts applied on your side.

I have found an issue with the workaround posted in my last reply - an item would be partially covered by the button, before going to the button group. So please disregard the previous script and use the following one:

<script>
    var $ = $telerik.$;
 
    Telerik.Web.UI.RadNavigation.prototype._calculateWidth = function (elements) {
        var $element = $(this.get_element()),
        navWidth = $element.width(),
        indexOfLastElement = null,
        rootElementsWidth = 0,
        supportsMedia = "matchMedia" in window;
 
        if (supportsMedia && !window.matchMedia("(min-width: " + this._minWidth + "px)").matches) {
            return 0;
        }
 
        var currentNode = null;
        var currentNodeWidth = 0;
 
        for (var i = 0; i < elements.get_count() ; i++) {
            currentNode = elements._data[i];
            currentNodeWidth = $(currentNode.get_element()).outerWidth();
 
            if (currentNode._visible) {
 
                rootElementsWidth += currentNodeWidth - 1;
            }
 
            if (rootElementsWidth >= navWidth) {
                var moreButtonWidth = $element.find(".rnvMore").outerWidth(true);
                rootElementsWidth += moreButtonWidth - currentNodeWidth;
 
                if (rootElementsWidth > navWidth) {
                    indexOfLastElement = i - 1;
                }
                else {
                    indexOfLastElement = i;
                }
                break;
            }
        }
 
        return indexOfLastElement;
    }
</script>

I am sending you the test page used and its sitemap to test the RadNavigation behavior on your side.

If the issue described in your last post still persist, could you open a support ticket and send us an isolated runnable sample, which could be used to replicate the issue and debug it.

Regards,
Dimitar
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Tim Runyan
Top achievements
Rank 1
answered on 01 Feb 2016, 01:32 AM
We would like the navigation control to display as many menu items as possible (with the remaining ones under the hamburger on the far right) even when being viewed on a mobile device . Before adding the script above, all mobile devices would display the hamburger even if all of the top level nodes would fit without the need for the hamburger. After including the script, the control works as we had hoped on larger width tablets and even phones (e.g. iPhone 6 Plus in landscape), but with mobile devices smaller it's back to only the hamburger. Can the script be modified to allow for smaller widths of our choosing (and can it be modified to refresh the menu layout upon reorientation of the mobile device between landscape and portrait or vice versa)?
0
Plamen
Telerik team
answered on 04 Feb 2016, 07:03 AM
Hello,

In such case you may try to set the minWidth of the control and repaint it on load so that it looks according to your scenario:
function pageLoad() {
               var nav = $find("<%=RadNavigation1.ClientID%>");
               nav.set_minWith(100);
               nav.repaint();
           }

Hope this will help you solve the issue.

Regards,
Plamen
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Navigation
Asked by
Jon
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Jon
Top achievements
Rank 1
Tim Runyan
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or