Adaptive Behaviour

6 posts, 0 answers
  1. Jon
    Jon avatar
    53 posts
    Member since:
    Oct 2013

    Posted 02 Apr 2015 Link to this post

    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?




  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 02 Apr 2015 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    53 posts
    Member since:
    Oct 2013

    Posted 02 Apr 2015 in reply to Dimitar Link to this post

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













  5. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 02 Apr 2015 Link to this post

    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.

     
  6. Tim Runyan
    Tim Runyan avatar
    18 posts
    Member since:
    Apr 2007

    Posted 31 Jan Link to this post

    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)?
  7. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 04 Feb Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017