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

I know I'm late to the party but here's how I just did it. It's mostly copied from the TreeList's no data feature (I was annoyed that you didn't have the same thing with the standard grid). I made it into a prototype extension so it's automatically added to every grid. An option could also be added to make the message configurable.

// Replace the grid content with a status message (Can be reused for data errors if you want to show "Request failed [Reload]" or something like that.
kendo.ui.Grid.prototype._showStatus = function (message) {
    var status = this.content.find(".k-status");

    if (!status.length) {
        status = $("
").appendTo(this.content.closest(".k-grid-content"));
    }

    status.html(message);
};

// Put back the grid content instead of the status message
kendo.ui.Grid.prototype._hideStatus = function () {
    this.content.find(".k-status").remove();
};

// Keep the original render function so we can call it int our override
kendo.ui.Grid.prototype.__renderContent = kendo.ui.Grid.prototype._renderContent;

// Override the render function
kendo.ui.Grid.prototype._renderContent = function (data, colspan, groups) {
    this.__renderContent(data, colspan, groups);
    if (data.length)
        this._hideStatus();
    else
        this._showStatus("No data."); // Could also add an option for that text so you can choose the message in a grid config
};