No data and horizontal scrolling

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<div id="testGrid"></div>JSLint

CSS

#testGrid{
    margin-top: 50px; 
}
form.k-filter-menu button{
    float: left;
}

JavaScript

var data_1 = [{
    "id": 1,
    "FirstName": "James",
    "LastName": "Bond",
    "Salaried": true}];

var columnDefinitions = [
    {
    field: "id",
    title: "Id",
    width: 317},
{
    field: "FirstName",
    title: "First Name",
    width: 317},
{
    field: "LastName",
    title: "Last Name",
    width: 217},
{
    field: "Salaried",
    title: "Salaried",
    width: 217}
];

var modelFields = {
    id: {
        type: "number"
    },
    FirstName: {
        type: "string"
    },
    LastName: {
        type: "string"
    },
    Salaried: {
        type: "boolean"
    }
};

var testGridDataSource = new kendo.data.DataSource({
    data: data_1,
    schema: {
        model: {
            fields: modelFields
        }
    }
});

$("#testGrid").kendoGrid({
    dataSource: testGridDataSource,
    columns: columnDefinitions,
    filterable: true,
    columnMenu: true,
    sortable: {
        mode: "multiple",
        allowUnsort: true
    },
    resizable: true,
    pageable: {
        pageSizes: true
    }
});