Display a message within the Kendo grid when it's empty

Question

I\'m trying to display a friendly message (like \"No records found, try again later\") within the grid content, when there are no records in the database.

F

Answer 1

If your grid has detail grids (nested grids) then the above examples wont work on the nested grids. To ensure you apply this to all of your kendo grids you can do the following:

function kendoEmptyGridFix() {
    $("[data-role='grid']").each(function() {
        $(this).data("kendoGrid").bind('detailInit', function(e) {
            kendoEmptyGridFix();
        });
        $(this).data("kendoGrid").bind('dataBound', function(e) {
            var colCount = this.table.find("tHead tr th").length;
            if ($(this)[0].dataSource._view.length == 0) {
                var msg = ($(this)[0].dataSource.options.emptyMsg == undefined ? "No Results Found!" : $(this)[0].dataSource.options.emptyMsg);
                this.table.find('tbody').html('
' + msg + '
');

                // optional to hide pager section
                this.table.parent().find('.k-grid-pager').hide();
            };
        });
    });
}

Then call this function after all of your content has been loaded, there is no need to add it to each grid individually.

$(document).ready(function () {
    kendoEmptyGridFix();
});

if you wanted to change the message then add emptyMsg to your dataSource i.e.

dataSource: {
    transport: {
        read: {
            url: "/getItems/" + e.data.id,
            dataType: "xml"
        }
    },
    emptyMsg: 'There are currently no items available', 
    schema: {
        type: "xml",
        data: "/a/b",
        model: {
            fields: {
                "id": "id/text()",
                "status": "status/text()"
            }
        }
    },
    pageSize: 20
}