Kendo Grid with No data display

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="grid"></div>
<div id="msgBox"></div>

JavaScript

$("#grid").kendoGrid({
    dataSource: [],
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5,
        messages: {
            empty: "No data"
        }
    },
    columns: [],
    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);*/
        var grid = $("#grid").data("kendoGrid");
        var mBox = $("#msgBox");
        if (grid.dataSource.data().length === 0) {
            if (!mBox.data("kendoWindow")) {
                mBox.kendoWindow({
                    actions: ["Close"],
                    animation: {
                        open: {
                            effects: "fade:in",
                            duration: 500
                        },
                        close: {
                            effects: "fade:out",
                            duration: 500
                        }
                    },
                    modal: true,
                    resizable: false,
                    title: "No items",
                    width: 400
                }).data("kendoWindow").content("<p>No contacts available. Please try again later.</p>").center().open();
            } else {
                mBox.data("kendoWindow").content("<p>No contacts available. Please try again later.</p>").open();
            }

        }
    }
});