How to create Menu Vertical Left Side with expand to bottom like AdminLTE template.

4 posts, 0 answers
  1. ALED
    ALED avatar
    3 posts
    Member since:
    Feb 2018

    Posted 23 Feb 2018 Link to this post

    I am new to Telerik and pretty new to Javascript or css as well. Wanting to build a website that uses the Kendo.Menu() it can be responsive. and want to achive like as
    Menu dropdown view on this template  https://adminlte.io/themes/AdminLTE/pages/UI/general.html
    I thought I would find a sample app that does part of what I need to do, like dropdown menu expand, left side menu lexpandable. It doesn't look like any of the sample apps do this sort of thing.  or if anyone achive to create sample dropdown menu and LeftSide collapse /expand navigation menu from this template

    https://demos.telerik.com/kendo-ui/html5-dashboard-sample-app/ , please share to me.

    Does anyone know of a sample application that I could use to learn Telerik and help with my application that I would like to create? If it used the Kendo.Menu() as the base, that would be fantastic.

    Thanks in advance

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1722 posts

    Posted 26 Feb 2018 Link to this post

    Hello ALED,

    The sidebar menu used on the link you provided looks similar in appearance and behavior to the Kendo UI PanelBar, whereas the Kendo UI Menu has a different feel, because its submenus expand like dropdowns. If you need an example that shows the PanelBar's features and functionality, we would suggest checking out our demos. Each demo has a Source code section, which demonstrates the PanelBar's configuration and API usage (e.g. API demo). You can also check the demos sample application, which allows you to run our demos locally, inspect more closely their implementation, modify them, etc. Additional learning resources you can find here for Kendo UI and here for Telerik UI for ASP.NET MVC.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. ALED
    ALED avatar
    3 posts
    Member since:
    Feb 2018

    Posted 28 Feb 2018 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    Thanks for you response,

    i had try the sample of PanelBar template, base on Model i want to add the id each of items child menu, and add custom class css,actually  i dont know the property of PanelBar, refer the existring model, thats all or any property to achieve that.

     

    BR,

     

    Aled

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1722 posts

    Posted 01 Mar 2018 Link to this post

    Hello Aled,

    See the following PanelBar demo, which shows model binding. Note how the items text is set:
    @(Html.Kendo().PanelBar()
        .Name("panelbar-right")
        .BindTo((IEnumerable<CategoryItem>)ViewBag.inline, (NavigationBindingFactory<PanelBarItem> mappings) =>
        {
            mappings.For<CategoryItem>(binding => binding.ItemDataBound((item, category) =>
            {
                item.Text = category.CategoryName;
            })
                .Children(category => category.SubCategories));
     
            mappings.For<SubCategoryItem>(binding => binding.ItemDataBound((item, subCategory) =>
            {
                item.Text = subCategory.SubCategoryName;
            }));
        })
    )

    A similar approach can be used to set a class and id to the items through the HtmlAttributes option:
    @(Html.Kendo().PanelBar()
        .Name("panelbar-right")
        .BindTo((IEnumerable<CategoryItem>)ViewBag.inline, (NavigationBindingFactory<PanelBarItem> mappings) =>
        {
            mappings.For<CategoryItem>(binding => binding.ItemDataBound((item, category) =>
            {
                item.Text = category.CategoryName;
                item.HtmlAttributes["id"] = category.CategoryName;
                item.HtmlAttributes["class"] = category.CategoryName;
            })
                .Children(category => category.SubCategories));
     
            mappings.For<SubCategoryItem>(binding => binding.ItemDataBound((item, subCategory) =>
            {
                item.Text = subCategory.SubCategoryName;
                item.HtmlAttributes["id"] = subCategory.SubCategoryName;
                item.HtmlAttributes["class"] = subCategory.SubCategoryName;
            }));
        })
    )

    In this example the same fields CategoryName and SubCategoryName are used, but in your case you could have an ID or Class fields, the values of  which you would be able to use and set the corresponding attribute.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 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