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?
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?
8 Answers, 1 is accepted
0
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
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!
0
Mark
Top achievements
Rank 1
Rank 1
answered on 19 Sep 2014, 10:06 AM
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
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
0
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
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.
0
Mark
Top achievements
Rank 1
Rank 1
answered on 19 Sep 2014, 10:39 AM
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
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
0
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
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.
0
john
Top achievements
Rank 1
Rank 1
answered on 12 Feb 2019, 04:52 PM
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".
0
john
Top achievements
Rank 1
Rank 1
answered on 12 Feb 2019, 04:58 PM
By "style framework", I meant "theme". There are currently 10 themes to select from, and only one says bootstrap. Are the rest not bootstrap?
0
Hello John,
For a generic way of working with both Bootstrap and Kendo UI I would suggest the following:
Dimitar
Progress Telerik
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.
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.