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

2 Answers 656 Views
Menu
ALED
Top achievements
Rank 1
ALED asked on 23 Feb 2018, 09:00 AM

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 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 26 Feb 2018, 02:55 PM
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.
ALED
Top achievements
Rank 1
commented on 28 Feb 2018, 07:36 AM

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

0
Ivan Danchev
Telerik team
answered on 01 Mar 2018, 04:06 PM
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.
Tags
Menu
Asked by
ALED
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or