Kendo Year Filter Dashboard Tabs

by chanaka1

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.dataviz.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/firebug-lite/1.4.0/firebug-lite.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
 <div id="year-filtering-tabs" class="filtering-tabs"></div>

CSS

.filtering-tabs {
            border: 0;
            background: none;
        }
.filtering-tabs {
            border: 0;
            background: #fff;
        }
            .filtering-tabs .k-item {
                width: 19.8%;
                border: 0;
                margin: 0 .2% 0 0;
                padding: 0 0 4px;
                text-align: center;
                cursor: pointer;
                background: none;
                border-bottom: 4px solid #b3bbc5;
                font: 16px/2em Arial,sans-serif;
                color: #727f8e;
            }

            .filtering-tabs .k-state-hover {
                color: #2e2e2e;
                background: none;
            }

            .filtering-tabs .k-state-active {
                padding: 0;
                color: #2b8abe;
                border-bottom: 8px solid #0094ff;
            }

            .filtering-tabs .k-link {
                padding: 0;
            }

JavaScript

function setup() {
    $("#year-filtering-tabs").kendoTabStrip({
        dataSource: ["2008", "2009", "2010", "2011", "2012"],
        change: function(e) {}
    }).data("kendoTabStrip").select(4);
}

$(function() {
    setTimeout(setup, 500);
});