Styling Telerik Kendo UI Grid with LESS and Bootstrap

Admittedly, I’m not UI expert. Even the world of HTML, JavaScript and CSS is interesting I have again and again the same problems. Some of my problem is, that I like to make the things quickly. And CSS and HTML is often repetitive try and error task.

One of products I’m working on is using Telerik’s Kendo UI. It is nice, but sometimes not so intuitive and not very well documented, product suite.

What I wanted to achieve is to design Kendo Grid with the help of Twitter’s Bootstrap. For example I wanted to integrate some icons for the CRUD operations.

The grid before the customization

The goal was to get this done quickly and reusable as possible. My idea was to overwrite the existing CSS rules. For sure you can go with JavaScript or JQuery and remove unnecessary classes, or better, replace them with your own. My personally opinion is that JavaScript isn’t the right thing to solve this problem.

As I went with the CSS way, I found LESS. LESS is a CSS pre-processor and one of the cool things is, it allow Mixings. In short “Mixing are way of including properties from one rule-set into another one”.

The original DOM is looking like this:

Each button has bunch of classes. The grid is using the AJAX Binding, so maybe in the Server Binding are used different classes.

Via NuGet I downloaded the Bootstrap LESS files which are referenced in the concrete LESS file. The class .gridActionButtonBase is used to override defined attributes. The special about LESS is the mixing of Bootstrap existing classes like .btn or .glyphico with them from Kendo, which isn’t possible in CSS now. These two class parameters @spanClassNameSelector and @glyhiconContent describes span selector and the content to be rendered.

@import (reference) 'bootstrap/bootstrap.less';
@import (reference) 'bootstrap/glyphicons.less';

.gridActionButtonBase(@spanClassNameSelector,  @glyhiconContent){
    font-size:0;
    border-style: none;
    border:0;
    margin: 0;
    background-color:transparent;
    background-image:none;
    color: rgb(66, 139, 202);
    min-width:15px !important;
    padding:0;
    vertical-align:middle;
    white-space:nowrap;
    display:inline-block;

    &:hover, &:focus{
        color: #2a6496;
        background-image:none;
        background-color:transparent;
        text-decoration:none;
        box-shadow:none;
        outline:none;
    }

    &:after{
        .btn !important;
        .glyphicon !important;
        content: @glyhiconContent;
    }

    span.@{spanClassNameSelector} {
        display:none;
    }
}

a.k-grid-edit{

    .gridActionButtonBase(~'k-edit','\270f');
}

a.k-grid-delete{

    .gridActionButtonBase(~'k-delete','\e020');
}

a.k-grid-update{

    .gridActionButtonBase(~'k-update','\e013');
}

a.k-grid-cancel{

    .gridActionButtonBase(~'k-cancel','\e014');
}

You link the generated CSS file (which is automatically generated by Web Essentials plugin for Visual Studio) like any other CSS file. With the new CSS is the new DOM looking little bit different.

The result is grid with the Bootstrap icons like those below.