Adaptive Behaviour

[Jon]

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?

[Dimitar]

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

 

 

[Jon]

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).

[Dimitar]

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

 

 

[Tim Runyan]

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)?

[Plamen]

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