KendoGrid within KendoTab - focus problem

by Abra Cadabra

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="tabstrip">
    <ul>
        <li class="k-state-active">Tabstrip#1</li>
        <li>Tabstrip#1</li>
    </ul>
    <div>
        <div id="grid1" class="k-grid"></div>
    </div>
    <div>
        <div id="grid2" class="k-grid"></div>
    </div>
</div>

JavaScript

$("#tabstrip").kendoTabStrip({
    animation: {
        open: {
            effects: "false"
        }
    }
});

$(".k-grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            // read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
        },
        pageSize: 10
    },
    groupable: true,
    //navigatable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5,
        messages: {
            empty: "No data"
        }
    },
    columns: [{
        field: "ContactName",
        title: "Contact Name",
        width: 175,
        locked: true
    }, {
        field: "ContactTitle",
        title: "Contact Title",
        width: 175
    }, {
        field: "CompanyName",
        title: "Company Name",
        width: 175
    }],
    dataBound: function (e) {
        console.log(this);
        var $grid = $(this.element[0]),
            newWidth = $grid.find('.k-grid-content').width() - 15;
        $grid.find('.k-grid-header-wrap > table, .k-grid-content > table').css('width', newWidth);
    }
});