KendoUI CSS issue with Bootstrap and custom grid commands

[Sandra Walters]

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?

[Dimo]

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:

http://docs.telerik.com/kendo-ui/api/web/grid#events-dataBound

function onDataBound(e) {
   e.sender.tbody.find(".btn-warning").removeClass("k-button");
}

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.

Regards,
Dimo
Telerik

 

 

[Erik]

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):

@Styles.Render("~/Content/kendo")

@Styles.Render("~/Content/css")  

After I did that it worked great!

HTH