Kendo Grid No Records

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<style type="text/css">
.grid-no-data {
    font-size: 2em;
    font-family: "Segoe UI", Arial, Sans-Serif;
    color: #666;
    margin: 5pt 0;
    border:1px solid black;
}   
</style>

<div id="grid"></div>

<script type="text/x-kendo-template" id="template">
    <div class="tabstrip">
        <ul>
            <li class="k-state-active">
               Orders
            </li>
            <li>
                Contact Information
            </li>
        </ul>
        <div>
            <div class="orders"></div>
        </div>
        <div>
            <div class='employee-details'>
                <ul>
                    <li><label>Country:</label>#= Country #</li>
                    <li><label>City:</label>#= City #</li>
                    <li><label>Address:</label>#= Address #</li>
                    <li><label>Home Phone:</label>#= HomePhone #</li>
                </ul>
            </div>
        </div>
    </div>

</script>

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr class="k-master-row">
        <td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
        <td>Some text</td>
    </tr>
</script>

JavaScript

$(document).ready(function() {
    var grid = $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
            },
            pageSize: 5,
            serverPaging: true,
            serverSorting: true,
            filter: { field: "City", operator: "eq", value: "NonExistant" }
        },   
        dataBound: grid_dataBound,                    
        height: 450,
        sortable: true,
        pageable: true,
        columns: [
            {
            field: "FirstName",
            title: "First Name"},
        {
            field: "LastName",
            title: "Last Name"},
        {
            field: "Country"},
        {
            field: "City"},
        {
            field: "Title"}
        ]
    });
});

function grid_dataBound(e) {
    var grid = $('#grid').data('kendoGrid');
    
    if (grid.dataSource == null || grid.dataSource._total == 0) {
        grid.content.find('div').each(function () {
            $(this).hide();
        });
        grid.content.append('<div class="grid-no-data">Nothing to show here</div>');
    }
    else {
        var noDataDiv = $('.no-data', grid.content);

        if (noDataDiv != null) {
            $(noDataDiv).remove();
        }

        $('div', grid.content).each(function () {
            $(this).show();
        });
    }
}