KendoUI CSS issue with Bootstrap and custom grid commands

3 posts, 0 answers
  1. Sandra Walters
    Sandra Walters avatar
    29 posts
    Member since:
    Dec 2005

    Posted 04 Aug 2014 Link to this post

    Hello.  Apologies if this issue is covered elsewhere, I couldn't find a clear statement of what to do with this kind of scenario:

    I have a Kendo (v2014.2.716) grid on a page with a couple of custom commands defined.  I'm also using Bootstrap (v3.0.1) for styling purposes, therefore I'm including both kendo.bootstrap.min.css and kendo.common-bootstrap.min.css in my project.   I'm trying to apply a couple of Bootstrap CSS classes to the command such that the colors are consistent with buttons in other parts of the page:

                        command: [
                            name: "view", text: "View", className: "btn btn-warning",
                            click: function (e) {
                                // some irrelevant code here.....

    However, when the buttons are rendered, the colors defined by the Bootstrap CSS are getting overridden.  After taking a look with a DOM explorer in a browser, I see that the command link is getting the following classes applied to it:

    <a class="k-button k-button-icontext btn btn-warning k-grid-view" href="#"><span class=" "></span>View</a>

    It appears that the k-button class is defining a color, border-color, and background-color.  

    So my questions are: 
    1) Why are these two CSS classes prepended to the classes specified by the className attribute?  I could understand this for critical sizing issues, but not for colors.
    2) Is there a recommended workaround short of re-defining all the Bootstrap styles I need with an !important next to the values that must take precedence?

  2. Dimo
    Dimo avatar
    8318 posts

    Posted 06 Aug 2014 Link to this post

    Hello Sandra,

    The two k-... classes are added, because they are the default CSS classes of the built-in Grid command buttons.

    Apart from modifying the CSS code to override the Kendo UI styles, you can remove the k-... classes in the Grid's dataBound event:

    function onDataBound(e) {

    Note that this may lead to undesired side effects, e.g. changes in the buttons' layout or position. In this case, you will need to apply back some of the k-button styles to the btn-warning class.

    Depending on the specificity of the Bootstrap styles, you can also try reordering the CSS files and placing the Bootstrap stylesheet last. This may turn out to be enough with no other Javascript tweaks being required.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Erik
    Erik avatar
    43 posts
    Member since:
    Jan 2011

    Posted 14 Jan Link to this post

    I ran into this same issue and tried the suggestion of simply re-ordering the CSS on my _Layout page (I'm using ASP.NET MVC):



    After I did that it worked great!


Back to Top