Menu and Bootstrap in UI for ASP.NET MVC Menu

Adrian

1 posts

Member since:
Nov 2013

Posted 09 Dec 2013 Link to this post

Since all the new web project templates in VS 2013 seem to use Bootstrap it would seem Microsoft have adopted this as their "default" layout template. As such I'd expect the Kendo UI libraries to work seamlessly with Bootstrap.

I have seen some documentation on this but the only guidance I can find on using the Kendo UI menu control with Bootstrap was this unanswered post on StackOverflow:
http://stackoverflow.com/questions/17729394/how-do-i-modify-the-kendo-ui-menus-default-html

So, to restate the question, what is the right way to use the Keno Menu control to put a drop down menu into the Bootstrap nav bar?

Dimo

Admin

8456 posts

Posted 10 Dec 2013 Link to this post

Hello Adrian,

If I understand you correctly, you would like to insert a Kendo UI Menu into a Bootstrap navbar and the Kendo UI Menu should adopt the same behavior, which is observed at:

http://getbootstrap.com/examples/navbar/

Unfortunately, this is not possible, as the Kendo UI Menu has been designed with different behavior and we have no intentions to couple it so tightly with the Bootstrap nav bar. What we could do in the future is to make the Kendo UI Menu switch from horizontal to vertical layout, depending on the browser viewport size. You can vote for such a feature at:

http://feedback.kendoui.com/

As far as compatibility goes, Kendo UI now works with Bootstrap 3 CSS on the page, which used not to be the case, because Bootstrap 3 enforces non-default reverse box model on all elements on the page, which breaks all content, which relies on the default box model.

Regards,
Dimo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Mark

5 posts

Member since:
Oct 2013

Posted 19 Sep 2014 in reply to Dimo Link to this post

Hi Dimo,
Just wondering if you guys have done this?

"What we could do in the future is to make the Kendo UI Menu switch from horizontal to vertical layout, depending on the browser viewport size."

It would be great if the menu changed on a mobile device rather then just outputting the same html as for a desktop.

Regards,
Mark

Dimo

Admin

8456 posts

Posted 19 Sep 2014 Link to this post

Hi Mark,

The discussed behavior is still not supported, I am afraid. The demand for it is lower than other features and widgets that we are currently working on.

Regards,
Dimo
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Mark

5 posts

Member since:
Oct 2013

Posted 19 Sep 2014 in reply to Dimo Link to this post

Hi Dimo,

Maybe I am asking the wrong question.

Does your menu automatically change to render for a mobile or desktop device?

This is the sort of functionality I wanted http://slicknav.com/ you can try to resize the screen and menu changes to suit a mobile device. I cant find this in the docs, but would have expected it since your widgets are responsive.

Regards,
Mark

Dimo

Admin

8456 posts

Posted 22 Sep 2014 Link to this post

Hello Mark,

Yes, I was referring to exactly the same behavior that you have shown, when I said that it is not supported.

Generally, you can achieve the desired behavior with two menus with toggled visibility, depending on the viewport width - one horizontal and one context that is attached to a custom icon.

http://demos.telerik.com/kendo-ui/menu/events

Regards,
Dimo
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

john

9 posts

Member since:
Nov 2014

Posted 12 Feb in reply to Dimo Link to this post

Since there's such a massive problem being compatible with bootstrap, what should we choose when we convert a MVC app to a telerik app? The wizard that prompts you does NOT tell you if a style framework is based on, except for the one that specifically says "bootstrap".

john

9 posts

Member since:
Nov 2014

Posted 12 Feb in reply to Dimo Link to this post

By "style framework", I meant "theme". There are currently 10 themes to select from, and only one says bootstrap. Are the rest not bootstrap?

Dimitar

Admin

667 posts

Posted 14 Feb Link to this post

Hello John,

For a generic way of working with both Bootstrap and Kendo UI I would suggest the following:

When working with Bootstrap 3, use the Kendo UI Bootstrap Less Theme, as it is specifically designed to accommodate to Bootstrap 3. You can read more about the Bootstrap 3 and Kendo Bootstrap theme integration in the following article.
When working with Bootstrap 4, use the Kendo UI Bootstrap v4 Sass Theme. The Kendo Bootstrap v4 theme has linked variables to Bootstrap in order to achieve similarity in the look and feel. Therefore, customizing the original Bootstrap theme will also affect the Kendo UI theme.

The above does not mean that the rest of the themes are not compatible with Bootstrap but rather emphasizes that the Kendo Less Bootstrap and Sass Bootstrap themes are specifically designed with the above-described versions of Bootstrap.

Additional information regarding the usage and customization of the Kendo UI Themes can be found in the Less-Based Themes Documentation and the Sass-Based Themes Documentation.

Regards,
Dimitar
Progress Telerik

Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.