Responsive Design Kendo UI Menu

4 posts, 0 answers
  1. Naresh
    Naresh avatar
    4 posts
    Member since:
    Dec 2016

    Posted 05 Jan Link to this post

    I am using Kendo UI to display the dynamic menu. How do I make this as Responsive design menu without using kendoResponsivePanel? Do you have any other menu control to have this functionality? Here is my code snippet. Please advise.

    @model ghi.Domain.Models.Menu.MenuItemList
    @using Kendo.Mvc.UI.Fluent
    @using ghi.Domain.Models.Menu
    @functions{
        public void addChildren(MenuItemBuilder builder, MenuData item, MenuItemList items)
        {
            var children = items.data.Where(m => m.MenuParentID == item.MenuID);
            if (children != null)
            {
                builder.Items(menuItems =>
                {
                    foreach (var child in children)
                    {
                        var menuItem = menuItems.Add().Text(child.MenuText);
                        addChildren(menuItem, child, items);
                    }
                });

            }
        }
    }

    @(Html.Kendo().Menu()
        .Name("menu")
        .Items(menu =>
        {
            menu.Add().Text("Home");
            foreach (var item in Model.data.Where(m => m.MenuParentID == null || m.MenuParentID == 0))
            {
                var builder = menu.Add().Text(item.MenuText);
                addChildren(builder, item, Model);
            }
        }))

  2. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 09 Jan Link to this post

    Hi,

    There isn't a built-in option to make Menu responsive, without using the responsive panel shown here: http://demos.telerik.com/kendo-ui/responsive/responsivepanel.

    If you don't want to use the responsive panel you will need to write some media queries that will cover your needs.

    Another option is to use Bootstrap and its built-in media queries if they can cover your case.

    Also, you can check Kendo UI ToolBar: http://demos.telerik.com/kendo-ui/toolbar/index - if it can work for you - it has built-in responsive behavior, but of course it is not equivalent of the Menu, but in some cases you can use it instead.

    Regards,
    Bozhidar
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Naresh
    Naresh avatar
    4 posts
    Member since:
    Dec 2016

    Posted 09 Jan in reply to Bozhidar Link to this post

    Thank you for the response. Can you please send me sample code to make kendo ui menu using media queries as responsive?
  4. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 11 Jan Link to this post

    Hi,

    You can check the following dojo example for a simple example of how to use Media Queries with Kendo UI Menu: http://dojo.telerik.com/@ruzhenov/AQOnU/2

    Use the dojo split bar in order to change the example width in order to activate different media queries conditions. In a normal state you will have the full menu items and red background. If the width of the browser/wrapper is 1024px and bellow, you will have red background and the last item of the menu will be hidden. If the width is 768px and bellow you will have blue background and the last two items of the menu will be hidden. If the width is 460px or bellow the background will be yellow and the menu will display just the first item and  on hover will show the other items.

    It is a simple example and it can be extended based on your requirements - using different media queries to show the menu most important links or to make it behave as you like.

    Bellow are a few resources explaining how to use Media Queries:

    http://www.w3schools.com/css/css_rwd_mediaqueries.asp

    https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

    https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/

    Belllow are also a few resources explaining how to use jQuery based on Media Queries, so except CSS to be able to add some client functionality based on the Media Queries:

    http://www.wiliam.com.au/wiliam-blog/jquery-and-css-media-queries

    https://dzone.com/articles/checking-media-queries-jquery

    http://fellowtuts.com/jquery/jquery-functions-with-css-media-queries-for-responsive-website/

    https://www.fourfront.us/blog/jquery-window-width-and-media-queries

    Regards,
    Bozhidar
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top